上一篇讲的是组件内守卫,路由还有独享守卫和全局守卫。
一、路由独享守卫
在路由配置的的时候可以设置该路径的独享守卫:
{
path: '/home',
name: 'home',
component: Home,
//路由独享守卫
beforeEnter(to, from, next){
next();
}
},
二、路由全局守卫
全局的路由守卫有几个不同的钩子函数:
1.beforeEach((to, from, next)=>{});
全局前置守卫,
2.beforeResolve((to, from, next)=>{});
当你路由内的东西都解析完毕后执行,
3.afterEach(()=>{});
当全都解析完毕了,最后了,执行afterEach
//路由全局守卫
router.beforeEach((to, from, next)=> {
next();
});
//当你路由内的东西都解析完毕后执行,
router.beforeResolve((to, from, next)=>{
next();
});
//当全都解析完毕了,最后了,执行afterEach
router.afterEach(()=>{
});
路由守卫执行顺序:先全局,再独享,再组件内,再resolve,最后afterEach
官网上的导航解析流程:
完整的导航解析流程
- 导航被触发。
- 在失活的组件里调用离开守卫。
- 调用全局的 beforeEach 守卫。
- 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
- 在路由配置里调用 beforeEnter。
- 解析异步路由组件。
- 在被激活的组件里调用 beforeRouteEnter。
- 调用全局的 beforeResolve 守卫 (2.5+)。
- 导航被确认。
- 调用全局的 afterEach 钩子。
- 触发 DOM 更新。
- 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。