聊聊vue中的三种导航钩子

本文给大家带来了关于vue的相关知识教程，一起聊聊vue中的三种导航钩子，大致内容如下所示：

1、全局守卫钩子，是指路由示例上直接操作的钩子函数，特点是所有路由配置的组件都会触发。

2、路由独享守卫钩子，是指在单个路由配置的时候也可以设置的钩子函数，且只能在这个路由下起作用。

3、局部守卫钩子，是指在组件内执行的钩子函数，类似于数组内的生命周期函数，相当于为配置路由的组件添加的生命周期钩子函数。

聊聊vue中的三种导航钩子

1、全局守卫

是指路由示例上直接操作的钩子函数，特点是所有路由配置的组件都会触发。简单点说就是触发路由就会触发这些钩子函数。钩子函数执行顺序包括beforeEach、beforeResolve、afterEach三个。

[beforeEach]：在路由跳转前触发，参数包括to,from,next三个，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚。

router.beforeEach  router.beforeResolve  router.afterEach
   const router = new VueRouter({ ... });
   router.beforeEach((to, from, next) => {
       // do someting
   });

●  to：代表要进入的目标，它是一个路由对象

●  from：代表当前正要离开的路由，同样也是一个路由对象

●  next：这是一个必须需要调用的方法，而具体的执行效果则依赖next方法调用的参数

[beforeResolve]：这个钩子和beforeEach类似，也是路由跳转前触发，参数也是to,from,next三个，和beforeEach区别官方解释为：

区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就会被调用。

即在beforeEach和组件内beforeRouteEnter之后，afterEach之后，afterEach之前调用。

[afterEach]：和beforeEach相反，它是在路由跳转完成之后触发，参数包括to、from，没有了next，它发生在beforeEach和beforeResolve之后，beforeRouteEnter(足迹按内守卫)之前。

const router = new VueRouter({ ... });
   router.beforeEach((to, from, next) => {
       // do someting
   });
 //全局后置钩子，后置钩子并没有 next 函数，也不会改变导航本身
   router.afterEach((to, from) => {
       // do someting
   });

2、路由独享守卫

是指在单个路由配置的时候也可以设置的钩子函数，且只能在这个路由下起作用。其位置如下，也就是像File这样的组件都存在这样的钩子函数。目前它只有一个钩子函数beforeEnter。

[beforeEnter]：和beforeEach完全相同，如果都设置则在beforeEach之后紧随执行，参数有to、from、next。

cont router = new VueRouter({
      routes: [
          {
              path: '/file',
              component: File,
              beforeEnter: (to, from ,next) => {
                  // do someting
              }
          }
      ]
  });

3、局部守卫

是指在组件内执行的钩子函数，类似于数组内的生命周期函数，相当于为配置路由的组件添加的生命周期钩子函数。钩子函数按执行顺序包括beforeRouteEnter、beforeRouteUpdate(2.2新增)、beforeRouteLeave三个，执行位置如下：

const File = {
       template: `<div>This is file</div>`,
       beforeRouteEnter(to, from, next) {
           // do someting
           // 在渲染该组件的对应路由被 confirm 前调用
       },
       beforeRouteUpdate(to, from, next) {
           // do someting
           // 在当前路由改变，但是依然渲染该组件是调用
       },
       beforeRouteLeave(to, from ,next) {
           // do someting
           // 导航离开该组件的对应路由时被调用
       }
   }

路由跳转导航解析流程，当由A路由–>B路由的时候

1、在A组件里调用离开守卫。 A组件中的beforeRouterLeave

2、调用全局的beforeEach守卫。 router.beforeEach

3、再执行B路由配置里调用beforeEnter。

routes:[
      {
          path:'/b',
          component:B,
          beforeEnter:(to,form,next)=>{
             ..... 
          }
      }
  ]

4、再执行B组件的进入守卫。 B组件中beforeRouterEnter

5、调用全局的beforeResolve守卫(2.5+)。 router.beforeResolve

6、导航被确认。

7、调用全局的afterEach钩子。 router.afterEach

8、触发DOM更新。

关于Vue中的三种导航钩子解析到这里就结束了，翼速应用平台内有更多相关资讯，欢迎查阅！