vue-router路由守卫

Posted 2021-03-06 linhongjie

 

一、导航解析流程

1 导航被触发

2 在失活的组件里调用离开守卫beforeRouteLeave(to,from,next)

3 调用全局前置守卫 beforeEach(to,from,next)

4 在复用的组件里调用beoreRouteUpdate(to,from,next)

5 在路由配置里调用路由独享的守卫beforeEnter()

6 解析异步路由组件

7 在被激活的组件里调用beforeRouteEnter(to,from,next)

8 调用全局解析组件beforeResolve

9 导航被确认

10 调用全局后置守卫afterEach()

11 触发DOM更新

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

二、路由守卫分类

1 全局前置守卫  beforeEach

2 全局后置守卫 afterEach

3 全局解析守卫 beforeResolve

4 路由专享守卫 beforeEnter

5 组件内守卫 beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave