Vue路由守卫

作用：对路由进行权限控制（路由守卫的功能其实和axios的拦截器差不多）

分类：全局守卫、独享守卫、组件内守卫

全局守卫：

//全局前置首位，初始化时执行，每次路由切换前执行
router.beforeEach((to,from,next)=>{
    console.log('beforeEach',to,from);
    if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
        if(localStorage.getItem('school')==='yaoayao'){//权限控制的具体表现
            next();
        }else{
            alert('暂无权限')
        }
    }else{
        next();//放行
    }
})
​
//全局后置首位，初始化时执行，每次路由切换后执行
router.afterEach((to,from,next)=>{
    console.log('afterEach',to,from);
    if(to.meta.title){
        document.title=to.meta.title//修改网页title
    }else{
        document.title='vue_test'
    }
})

​

独享守卫：

beforeEnter(to,from,next){
    console.log('beforeEnter',to,from);
    if(to.meta.isAuth){
        if(localStorage.getItem('school')==='yaoayao'){
            next();
        }else{
            alert('暂无权限查看')
        }
    }else{
        next();
    }
}

组件内守卫：

//进入守卫，通过路由规则，进入该组件时被调用
beforeRouterEnter(to,from,next){
    
},
//离开守卫，通过路由规则，离开该组件时被调用
beforeRouterLeave(to,from,next){
    
}