Vue：获取网址参数

Question

根据文档中的信息。我可以从url获取参数，并将它们作为参数传递给组件。 https://router.vuejs.org/guide/essentials/passing-props.html#function-mode

我尝试：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

var router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: App, props: (route) => ({ query: route.query.q }) }
      ]
})

new Vue({
    router,
  el: '#app',
  render: h => h(App),
})

App.vue：

<script>
  export default {
    name: 'app',
    data () {
      return {

      }
    },
    mounted: function() {
      console.log(this.query)
    },
  }
</script>

在控制台中：

  

未定义

如何正确接收来自网址的参数？