VueRouter this.$route.query 总是空的

Question

我正在尝试获取查询 param code，但$route.query始终为空。我根据文档使用了功能模式。有什么不见了？

路由器：

// use vue-router
import Router from 'vue-router'
Vue.use(Router)

// create router
const router = new Router({
  routes: [
    {
      path: '/',
      component: Home,
      props: (route) => ({ code: route.query.code })
    }
  ]
})

主页.vue

<template>
  <div>
    <Navbar />
      <FlatHeader />
      <v-content>
        <ComingSoon />
        <Changes />
        <EmailSubscribe />   
      </v-content>
    <AuthorizationModal />
  </div> 
</template>

<script>
import AuthorizationModal from './components/AuthorizationModal';
import FlatHeader from './components/FlatHeader';
import ComingSoon from './components/ComingSoon';
import Changes from './components/Changes';
import EmailSubscribe from './components/EmailSubscribe';

export default {
  name: 'Home',
  components: {
    FlatHeader,
    ComingSoon,
    Changes,
    EmailSubscribe,
    AuthorizationModal
  },
  props: {
    code: {
      type: String,
      default: null
    }
  },
  methods: {
  },
  mounted() {
    console.log(this.$route)
  }
}

</script>

$route 控制台输出：

Answer 1

我通过将模式设置Router为“历史”来解决这个问题。

路由器：

// create router
const router = new Router({
  mode: 'history', // add 'history' mode
  routes: [
    {
      path: '/',
      component: Home,
      props: (route) => ({ code: route.query.code })
    }
  ]
})