- 什么是导航守卫
用于在路由跳转前做一些验证,比如做登录身份验证
- 导航守卫的分类
- 全局的, 单个路由独享的, 或者组件级的。
- 全局守卫包含:router.beforeEach(),router.beforeResolve() ,router.afterEach()、
- 路由独享beforeEnter()
- 组件内的守卫beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave
to :即将要进入的目标 、 路由对象
from:当前导航要离开的路由
next:允许跳转到目标页面、,如果不写next()或者next(false),页面路由不会跳转,也就是页面被阻止在当前页面了
- 全局守卫
- 路由独享守卫
const router = new VueRouter({
routes:[{
path:'/foo',
component:Foo,
beforeEnter:(to,from,next) =>{
//写逻辑
}
}]
})
-
组件内守卫
-
导航守卫的执行顺序是怎么样的?
beforeRouteLeave < beforeEach < beforeRouteUpdate < beforeEnter < beforeRouteEnter < beforeResolve < afterEach
- 导航守卫中的next的用处?
next的作用,使导航守卫队列的继续向下迭代
- 为什么afterEach守卫没有next?
afterEach根本不在导航守卫队列内,没有迭代的next
- beforeEach是否可以叠加?
beforeEach是可以叠加的,所有的全局前置守卫按顺序存放在beforeHooks的数组里面,
- 路由跳转经历了哪几部分?
路由跳转的核心方法是transitionTo,在跳转过程中经历了一次confirmTransition,
- 导航解析流程
1、导航被处罚。
2、在失活的组件里调用离开守卫
3、调用全局的beforeEach守卫
4、在重用的组件里调用beforeRouteEnter守卫
5、在路由配置里调用beforeEach
6、解析异步路由组件
7、在被激活的组件里diaoyongbeforeRouteEnter
8、调用全局的beforeResolve守卫
9、导航被确认
10、调用全局的afterEach钩子。
11、触发DOM更新。
12 用创建好的实例调用beforeRouteEnter守卫中传给next()回调函数