I'm having an issue getting the URL query string from within a component. I am trying to implement this https://router.vuejs.org/guide/essentials/passing-props.html#function-mode so I can pass the query as a prop. I haven't used query strings much, and I tend to use params, but I need the query string in this case. The problem I am having is mounted() doesn't seem to have access to the query.
Below is a basic sample of what I can't get working:
URL = http://localhost:8080/?q=This%20is%20my%20query
Router.js
{
path: '/',
component: () => import('./App.vue'),
props: (route) => ({ query: route.query.q })
}
App.vue (Excerpt)
<template>
<div id="app">
1.{{ $route.query }}
2.{{ query }}
<searchResults class="results"/>
</div>
</template>
props: ['query'],
mounted () {
console.log(this.query)
console.log(this.$route.query)
},
In the code above, the following happens on visiting the URL in question:
console.log(this.query) = undefined
console.log(this.$route.query) = undefined
In the template, the following is output:
1.{}
2.
What do I need to do to get the query passed as the prop correctly?
