所以,我的路由器设置如下:
const routes = [
{
path: '/',
name: 'HomePage',
component: HomePage,
beforeEnter: checkAuth,
meta: {
requiresAuth: false,
showSidebar: false
}
},
{
path: '/feed',
name: 'FeedPage',
component: FeedPage,
beforeEnter: checkAuth,
beforeRouteEnter: ((to, from, next) => {
console.log(from)
}),
meta: {
requiresAuth: true,
showSidebar: true
}
},
{
path: '/faq',
name: 'FAQPage',
component: FAQPage,
beforeEnter: checkAuth,
meta: {
requiresAuth: true,
showSidebar: true
}
},
}
]
所以 checkAuth 是一个功能,它基本上在输入该路由(使用 google 身份验证)之前检查用户是否已通过身份验证,它工作得很好。但我也想使用 beforeRouteEnter 来检查身份验证后该路由中是否允许用户指定。我在 Vuex 商店中指定了存储。
如何使用 this 关键字来使用插件?
还有,beforeRouteEnter 的正确使用方法是什么?
最佳答案
根据 Vue Router 文档,beforeRouteEnter 守卫没有可以访问this,因为守卫在导航之前被调用已确认,因此新的进入组件还没有创建。
但是,您可以通过将回调传递给 next 来访问该实例。确认导航时会调用回调,并将组件实例作为参数传递给回调:
beforeRouteEnter (to, from, next) {
next(vm => {
// access to component instance via `vm`
})
}
还有 beforeRouteUpdate
& beforeRouteLeave
你可能想根据你的需要使用,因为这些 this
是可用的(但传递回调这两个不支持)
关于javascript - 高级 Vue 路由器守卫,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56472607/