beforeEach
全局前置路由守卫,基础用法如下:
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
next方法解析
在路由守卫中,只有next()是放行,其他的诸如:next('/logon') 、 next(to) 或者 next({ ...to, replace: true })都不是放行,而是:中断当前导航,执行新的导航
vue-router 动态加载路由
在addRoutes()之后第一次访问被添加的路由会白屏,这是因为刚刚addRoutes()就立刻访问被添加的路由,然而此时addRoutes()没有执行结束,因而找不到刚刚被添加的路由导致白屏。因此需要从新访问一次路由才行。
此时就要使用next({ ...to, replace: true })来确保addRoutes()时动态添加的路由已经被完全加载上去。
replace: true只是一个设置信息,告诉VUE本次操作后,不能通过浏览器后退按钮,返回前一个路由。确保用户在addRoutes()还没有完成的时候,不可以点击浏览器回退按钮。
如果守卫中没有正确的放行出口的话,会一直next({ ...to})进入死循环 。
router.beforeEach((to,from,next)=>{
if(store.getters.token){
if(store.getter.allRoutes==null){
router.addRoutes(allRoutes);
next({...to,replace:true});
}
next();
}
})