Vue-Router(前端路由)进阶

流程

before... 最后的参数是 next() ,必须调用

1. 导航被触发。
2. 在失活的组件里调用离开守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫。
5. 在路由配置里调用 beforeEnter 。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter 。
8. 调用全局的 beforeResolve 守卫。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数

• matcher: 替换
• match: 匹配
• addRoutes: 添加

全局导航守卫

• 前: router.beforeEach((to, from, next) => { })
• 后: router.afterEach((to, from,) => { })
• 单个路由: beforeEnter(to, from ,next) => { }
• 组件内
  • beforeRouteEnter(to, from, next){ }