我试图获取查询参数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 })
}
]
})
Home.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
控制台输出:
2条答案
按热度按时间9cbw7uwe1#
我通过将
Router
上的模式设置为'history'来解决这个问题。路由器:
ut6juiuv2#
在启用历史模式的Vue 3 + Vue Router 4.x上偶然发现了类似问题,因此接受的答案不适合。
找到了一个方便的
router.isReady()
,如果你等待Promise返回,它也可以解决这个问题:这对我很有效。引用相关文档了解更多细节:
isReady(): Promise<void>
返回一个Promise,当路由器完成初始导航时解析,这意味着它已经解析了与初始路由相关联的所有异步输入钩子和异步组件。如果初始导航已经发生,则Promise立即解析。
PS.在Vue Router 4.x中,历史模式是这样启用的: