VueRouter守卫和钩子的总结

守卫:即路由触发时,在被确认之前所要执行的函数,可以启到本次跳转的拦截作用,可以决定本次跳转成功与否。

钩子:即路由触发时机要执行的函数,不能起到拦截组用,不能干预本次跳转的成功与否。

一、分类

1.从调用时机来分,为两类:守卫、钩子

守卫:beforeEach、beforeRouteUpdate、beforeEnter、beforeRouteEnter、beforeReslove、beforeRouteLeave

钩子:afterEach

2.从其挂载点来分,分为三类:全局的、路由自己的、组件内部的

全局的:befroeEach、beforeReslove、afterEach

路由自己的:beforeEnter

组件内部的:beforeRouteUpdate、beforeRouteEnter、beforeRouteLeave

二、各个调用时机

1.beforeEach:跳转触发后,导航confirmed之前,在此过程中,所有钩子处于等待状态。

2.beforeReslove:在导航confirmed之前,在所有组件内部守卫和路由守卫执行完毕之后调用。

3.afterEach:在导航confirmed之后调用。

4.beforeEnter:解析异步路由组件之前调用,值得注意的是,如果两次路由的切换访问的是同一个组件,只是传递了不同的参数,那么beforeRouteUpdate要早于beforeEnter执行。

如果两次路由为同一组件,如查询商品详情,只是更换商品id,那将不会触发mounted生命钩子,这种应用场景下应把初始化数据的处理代码放到beforeRouteUpdate钩子中执行

5..beforeRouteUpdate:当路由组件复用时,调用。在beforeEnter之前。

6.beforeRouteEnter:路由组件解析完成以后,组件实例创建之前执行,此时并未创建组件实例,所以内部不能调用this,但其next函数可以接受一个回调函数,此函数接受一个实例参数,在导航confirmed后执行回调函数。

beforeRouterEnter(to,from,next){
    next(vm=>{
        console.log("此时才能访问vue实例,即vm")
    })
}

7.beforeRouteLeave:离开组件时调用,可用来做一些提示操作。

值得注意的是,除了afterEach之外,每个钩子都接受了一个next参数,此参数为一个函数,在钩子内部需要我们手动调用,不调用则跳转中断,另外此函数可以接受一个地址字符串,表示跳转到其他地址。

三、举例说明调用时机

假设当前在A组件触发超链接跳往B组件。路由守卫&钩子的执行过程如下:

1.超链接被触发;

2.在A组件执行beforeRouteLeave函数---(组件内部的)

3.调用beforeEach函数---(全局的)

4.如果B是复用的组件,嗲用beforeRouteUpdate函数---(组件内部的)

5.解析路由组件B前,调用beforeEnter函数---(路由的)

6.解析路由异步组件B

7.导航confirmed前调用beforeReslove函数---(全局的)

8.导航确认

9.B组件创建前调用beforeRouteEnter函数---(组件内部的)

10.调用afterEach函数---(全局的)

11.创建B组件实例,DOM更新

12.执行beforeRouteEnter的回调函数,传入当前的B实例为参数。

到此完成一次导航。

组件内部--全局--组件内部--路由--全局--组件内部--全局。

各个守卫&钩子的参数,参见:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

 

你可能感兴趣的:(前端,vue,vuerouter)