1. 路由钩子函数的错误捕获
如果我们在全局守卫/路由独享守卫/组件路由守卫的钩子函数中有错误,可以这样捕获:
router.onError(callback => {
// 2.4.0新增 并不常用,了解一下就可以了
console . log ( callback , 'callback' );
});
2. 跳转死循环,页面永远空白
伪代码:
router.beforeEach((to, from, next) => {
if ( 登录 ){
next ()
} else {
next ({ name : 'login' });
}
});
看逻辑貌似是对的,但是当我们跳转到 login 之后,因为此时还是未登录状态,所以会一直跳转到 login 然后死循环,页面一直是空白的,所以我们需要把判断条件稍微改一下。
if(登录 || to.name === 'login'){ next() } // 登录,或者将要前往login页面的时候,就允许进入路由
3.全局后置钩子的跳转
文档中提到因为router.afterEach不接受 next 函数所以也不会改变导航本身,意思就是只能当成一个钩子来使用,但是通过实践可以通过这种形式来实现跳转:
// main.js 入口文件
import router from './router' ; // 引入路由
router . afterEach (( to , from ) => {
if ( 未登录 && to . name !== 'login' ) {
router . push ({ name : 'login' }); // 跳转login
}
});
通过router.beforeEach 也完全可以实现且更好
完整的路由导航解析流程(不包括其他生命周期)
- 触发进入其他路由。
- 调用要离开路由的组件守卫 beforeRouteLeave
- 调用局前置守卫: beforeEach
- 在重用的组件里调用 beforeRouteUpdate
- 调用路由独享守卫 beforeEnter 。
- 解析异步路由组件。
- 在将要进入的路由组件中调用 beforeRouteEnter
- 调用全局解析守卫 beforeResolve
- 导航被确认。
- 调用全局后置钩子的 afterEach 钩子。
- 触发DOM更新( mounted )。
- 执行 beforeRouteEnter 守卫中传给 next 的回调函数