Vue路由守卫

1、作用：对vue的路由进行权限控制

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

3、全局守卫

// 全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>
{
    // to.meta.isAuth 路由中自定义变量
    if(to.meta.isAuth)
    {   //判断当前路由是否需要进行权限控制
        //localStorage.getItem('权限名称') 获取存储在本地的权限变量
        if(localStorage.getItem('权限名称')==='权限数值'){  //权限控制的具体规则
            next(); //放行
        }else
        {
            alert('暂无权限查看');
        }
    }else
    {
        next(); //放行
    }
})

// 全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>
{
    if(to.meta.title)
    {
        document.title = to.meta.title; //修改网页的title
    }else
    {
        document.title = 'vue_test';
    }
})

4、独享路由守卫（写在单个路由配置中）

//它可以结合全局后置守卫一起使用
beforeEach((to,from,next)=>
{

    if(to.meta.isAuth)
    {   //判断当前路由是否需要进行权限控制
        //localStorage.getItem('权限名称') 获取存储在本地的权限变量
        if(localStorage.getItem('权限名称')==='权限数值'){  //权限控制的具体规则
            next(); //放行
        }else
        {
            alert('暂无权限查看');
        }
    }else
    {
        next(); //放行
    }

})

5、组件内守卫（组件内守卫是的两个方法是与生命周期函数平级的）

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