vue路由守衛觸發順序

不同組件之間的路由跳轉流程圖

1. 導航被觸發（A–>B）
2. 調用A組件內路由守衛beforeRouteLeave(to,from,next)
3. 調用全局路由前置守衛router.beforeEach(to,from,next)
4. 調用B路由獨享守衛 beforeEnter(to,from.next)
5. 解析異步路由組件B
6. 調用B的組件內路由守衛beforeRouteEnter(to,from,next)
7. 調用全局路由解析守衛 router.beforeResolve(to,from,next)
8. 導航被確認
9. 調用全局路由鈎子router.afterEach(to,from)
10. 渲染B組件DOM

復用組件的路由跳轉流程圖

1. 觸發全局路由鈎子afterEach
2. 更新DOM
3. 導航被觸發（改變動態路由參數）
4. 調用全局路由前置守衛 router.beforeEach(to,from,next)
5. 調用復用組件的組件內路由守衛 beforeRouteUpdate(to,from,next)
6. 調用全局路由解析守衛router.beforeResolve(to,from,next)
7. 導航被確認
8. 調用全局路由鈎子 router,afterEach(to,from)
9. 更新DOM

喜歡的小伙伴可以關注我的微信公眾號“前端偽大叔”