路由守卫

155 阅读1分钟

一个组件跳转到另外一个组件流程

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")
         }
     }