Vue(5) vue-router中的7种钩子

Vue-router的钩子函数

• Vue-router的钩子函数，其实说的就是导航守卫
• 导航表示路由正在发生变化

全局守卫

1、beforeEach

• 全局前置守卫，在路由跳转前触发，它在每次导航时都会触发
• 通过router.beforeEach注册一个全局前置守卫
  
  

参数：

• beforeEach全局前置守卫接收三个参数

router.beforeEach((to,from,next)=>{

})

• to: 即将要进入的目标
• from: 当前导航正要离开的路由
• next: next()方法以下几种情况
• • next() 直接放行，进行管道的下一个钩子
• • next(false) 中断当前的导航，回到from路由对应的地址
• • next(‘/…’) 跳转到对应的路由中，其中传递的参数与router.push一致
• • next(error) 导航终止，且该错误会被传递给router.onError()注册过的回调
    
    

返回值：

• false: 取消当前导航
• null,undefined,true或者直接return:调用下一个导航守卫
  
  

定义多个守卫：

• 全局前置守卫可以定义多个，根据创建顺序调用。在所有守卫完成之前导航一直处于等待中
• 除了beforeEach全局前置守卫之外，其他的全局守卫也可以定义多个，并且在所有守卫完成之前，导航一直处于等待状态中
  
  

2、beforeResolve

• 全局解析守卫，在路由跳转之前，所有组件内守卫和异步路由组件被解析之后触发，它同样在每次导航是都会触发
• 它的回调函数的参数，返回值和beforeEach一样，也可以定义多个全局解析守卫
  
  

3、afterEach

• 全局后置钩子，它发生在路由跳转之后，beforeEahc和beforeResolve之后，beforeRouterEnter(组件内守卫)之前。它同样在每次导航时都会触发
• 它接收两个回调参数to,from，不接受next函数，也不会改变导航本身
  
  

路由守卫

4、beforeEnter

• 需要在路由上配置beforeEnter守卫

//路由守卫
{
  path: '/a',
  component: () => import('../components/A.vue'),
  beforeEnter: (to, from) => {
   console.log('🚀🚀~ beforeEnter ');
  },
},

• beforeEnter只在进入路由时触发，在beforeEahc之后紧随执行，不会在 params、query 或 hash 改变时触发。
  
  

组件守卫

• 定义在路由组件内部的守卫

5、beforeRouteEnter

• 路由定义进入组件之前调用
• 该守卫内访问不到组件的实例，也就是this为undefined,也就是它在beforeCreate生命周期前触发
• 接收参数 to from next 在next中可以传一个回调来访问组件实例
• 在导航被确认后会执行回调，并把组件实例作为回调方法的参数

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

6、beforeRouteUpdate

• 此时this已经可用了
• 接收参数 to from
  
  

7、beforeRouteLeave

• 此时this可用，这个离开守卫通常用于预防用户还未保存修改前突然离开。该导航可以通过返回false来取消
• 接收参数：to from
  
  

完整的导航解析流程：

• 1、导航被触发
• 2、在失活的组件里调用beforeRouteLeave守卫
• 3、调用全局的beforeEach守卫
• 4、在重用的组件里调用beforeRouteUpdate
• 5、在路由配置里调用beforeEnter
• 6、解析异步路由组件
• 7、在被激活的组件里面调用beforeRouteEnter
• 8、调用全局beforeResolve守卫
• 9、导航被确认
• 10、调用全局的afterEach守卫
• 11、触发DOM更新
• 12、调用beforeRouteEnter守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入