路由守卫触发流程梳理
路由守卫概括来说可以分为全局路由守卫、路由独享守卫和组件内路由守卫。本次笔记将梳理一下当路由发生改变时各个路由钩子触发的顺序,帮助更好的理解路由机制。
路由触发的流程我分为了两类:
- 一类是不同组件(组件A跳转到组件B)的路由跳转流程。
- 另一类是复用组件的路由跳转流程(组件A包含动态路由参数,只改变组件A的动态路由参数触发的路由跳转流程,示例: name/:id, 只改变id的值来触发路由跳转)。
不同组件之间的路由跳转流程图
- 导航被触发(A–>B)
- 调用A组件内路由守卫beforeRouteLeave(to,from,next)
- 调用全局路由前置守卫router.beforeEach(to,from,next)
- 调用B路由独享守卫 beforeEnter(to,from.next)
- 解析异步路由组件B
- 调用B的组件内路由守卫beforeRouteEnter(to,from,next)
- 调用全局路由解析守卫 router.beforeResolve(to,from,next)
- 导航被确认
- 调用全局路由钩子router.afterEach(to,from)
- 渲染B组件DOM
复用组件的路由跳转流程图
- 导航被触发(改变动态路由参数)
- 调用全局路由前置守卫 router.beforeEach(to,from,next)
- 调用复用组件的组件内路由守卫 beforeRouteUpdate(to,from,next)
- 调用全局路由解析守卫router.beforeResolve(to,from,next)
- 导航被确认
- 调用全局路由钩子 router,afterEach(to,from)
- 更新DOM