vue中的导航守卫(大家有什么问题或者我说的不对可以给我纠正,谢谢)
当我们这个页面有很重要是事情需要完成的时候,有时候会碰到别的按钮,则会消失,对我们的页面和用户体验不佳,则我们需要导航守卫来问候一下是否需要离开此页面。
beforeRouteLeave(to,from,next){} 当页面需要离开时问候
beforeRouteEnter(to,from,next){} 当页面进去时问候
则 to 为去哪 , from为从哪来。next执行。
// 离开这路由
beforeRouteLeave (to, from, next) {
// to 去哪 from从哪去 next执行。 this为undefined
const result = window.confirm("你确定要离开我吗?");
if(result){
next();
}else{
return;
}
},
// 进入这路由 this为undefined
beforeRouteEnter (to, from, next) {
const result = window.confirm('个人中心已恭候多时!请进')
if(result){
next(vm => {
console.log(vm)
});
}else{
return;
}
}
重要
全局守卫 (在main里面使用,守卫整体)
- router.beforeEach 守卫每一个路径
- router.beforeResolve 路由加载完成执行
- afterEach 路由解析完成执行。
路由独享守卫(在router里面使用,只能守卫一个路径)
- beforeEnter
组件内守卫(在组件内部使用)
- beforeRouteLeave 当离开这个路径时执行 Personal.vue用到
- beforeRouteEnter 路由将要进来。
- beforeRouteUpdate mounted 动态路由用到 Question.vue用到
- to from next
beforeRouterLeave 和 beforRouteUpdate 的区别?
beforeRouterLeave切换路由,不使用现在的组件了。
beforeRouterUpdate切换路由,但是还使用这这个组件。
全局守卫和独享守卫和组件守卫执行顺序
- beforeEach -> beforeEnter -> beforeRouteEnter -> beforeResolve -> afterEach
1。完整的导航解析流程
- 导航被触发。
- 在失活的组件里调用离开守卫。
- 调用全局的 beforeEach 守卫。
- 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
- 在路由配置里调用 beforeEnter。
- 解析异步路由组件。
- 在被激活的组件里调用 beforeRouteEnter。
- 调用全局的 beforeResolve 守卫 (2.5+)。
- 导航被确认。
- 调用全局的 afterEach 钩子。
- 触发 DOM 更新。
- 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
动态路由()
- /question/:id 动态路由 Academic question用到。
- this.$route.params.xxx 匹配拿到路由的值
- this.$route.query.xxx 只是通过问号去传递