例:
router.beforeEach((to, from, next) => {
let isLogin = Vue.prototype.$loginInfo.info.is_login
if (to.matched.length === 0) { //没有匹配到当前路由
next('/error')
} else if (!isLogin && to.path !== '/login' && to.path !== '/register' && to.path !== '/password') {
//如果没有登录,跳转到登录页面
next('/login')
} else {
if ((to.path === '/login' || to.path === '/register' || to.path === '/password' || to.path === '/error') && isLogin) {
//如果已经登录,却尝试访问登录页面或者错误页面,将继续保持原本的页面
next(from.path)
} else {
next()
}
}
// next()
})
全局后置钩子
你也可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受 next
函数也不会改变导航本身:
router.afterEach((to, from) => {
// ...
})
路由独享的守卫
你可以在路由配置上直接定义 beforeEnter
守卫:
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})