VueJs - Passing query in query string as prop

问题

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?

来源：https://stackoverflow.com/questions/52200983/vuejs-passing-query-in-query-string-as-prop