路由守卫钩子函数和执行顺序

Posted 一只燕仔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了路由守卫钩子函数和执行顺序相关的知识,希望对你有一定的参考价值。

什么是导航守卫:
概念:导航守卫又称路由守卫,实时监控路由跳转时的过程,在路由跳转的各个过程执行相应的操作

一、全局守卫
router.beforeEach(全局前置守卫)
router.afterEach(全局后置守卫)
二、路由独享守卫
beforeEnter(给单独的路由加)
三、组件内守卫
beforeRouteEnter(进入该路由时执行)
beforeRouteUpdate(该路由参数更新时执行)
beforeRouteLeave(离开该路由时执行)
执行顺序:
1.导航被触发

2.在失活的组件里调用离开守卫

3.调用全局的beforeEach守卫

4.在重用的组件里调用boforeRouteUpdate守卫

5.在路由配置里调用beforeEnter

6.解析异步路由组件

7.在被激活的组件里调用beforeRouteEnter

8.调用全局的beforeResolve守卫

9.导航被确认

10.调用全局的afterEach钩子

11.触发DOM更新

12用创建好的实例调用 beforeRouteEnter 守卫中传给next的回调函数

以上是关于路由守卫钩子函数和执行顺序的主要内容,如果未能解决你的问题,请参考以下文章

路由守卫钩子函数和执行顺序

vue-router导航守卫

vue之路由钩子函数-路由守卫

Vue-Router路由钩子函数(导航守卫)

路由导航守卫(导航钩子)

vue路由守卫