关于vue钩子函数的一些知识

415 阅读1分钟

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 的回调函数



部分摘抄于:www.jb51.net/article/146…