Vue2：路由守卫实现权限管理之组件内路由守卫

一、情景说明

当我们点击路由组件，切换后
在进入路由组件前，和离开路由组件时，触发相关逻辑
就要用到组件内路由守卫

这个不能等同于全局路由守卫的，前置守卫和后置守卫
因为，触发的条件有所不同

二、案例

在Abuout组件中
关键配置：
beforeRouteEnter:进入守卫，进入该组件时被调用
beforeRouteLeave:离开守卫，离开该组件时被调用

export default {
        name: "About",
        //通过路由规则，进入该组件时被调用
        beforeRouteEnter (to, from, next) {
            console.log('About--beforeRouteEnter',to,from)
            if(to.meta.isAuth){ //判断是否需要鉴权
                if(localStorage.getItem('school')==='china'){
                    next()
                }else{
                    alert('学校名不对，无权限查看！')
                }
            }else{
                next()
            }
        },
        //通过路由规则，离开该组件时被调用
        beforeRouteLeave (to, from, next) {
            console.log('About--beforeRouteLeave',to,from)
            next()
        }
    }

三、补充

注意
1、通过路由规则进入组件的情况，才会触发
不是，普通的components注册的方式进入组件

2、beforeRouteLeave中，如果不调用next()放行，则无法离开该组件