一个组件跳转到另外一个组件流程
1.先从前一个组件出来 beforeRouteLeave
2.到全局下beforeEach
3.根据路由跳转(路由独享) beforeEnter
4.进入下个组件 beforeRouteEnter
5.所有事情全部结束 afterEach
路由守卫
路由钩子
生命周期 动画 keep-alive 路由
全局 组件 独享
全局 beforeEach afterEach
组件 beforeRouteEnter beforeRouteLeave
路由独享 beforeEnter beforeLeave
例子:
let pzj = {
template: `<div>彭忠杰</div>`,
beforeRouteEnter (to, from, next) {
console.log(to,"组件-to");
// console.log(from,"from");
// console.log(next,"next");
next()
},
beforeRouteLeave (to, from, next) {
next()
}
}
独享路由 beforeEnter 可以监听子路由
beforeEnter: (to, from, next) => {
console.log(to,"路由独享-to");
next()
},
beforeLeave (to, from, next) {
next()
}
路由守卫: 检测整个路由跳转的过程 全局守卫 beforeEach 进入组件之前 afterEach 进入组件之后
路由导航守卫控制访问权限
if (sessionStorage.getItem("uesr")) {
next()
}else{
if (to.path ==="/login") {
next()
}else{
next("/login")
}
}