vue路由守卫

1.作用：对路由进行权限控制

2.分类：全局路由守卫，独享路由守卫，组件内守卫

3.全局路由守卫：

route/index.js
//全局前置守卫，初始化时执行，每次路由切换前执行
router.beforeEach((to,from,next)=>{
    if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
        if(){ //权限控制的具体规则
            next() //放行
        }else{
            ....
        }
    }else{
        next() //放行
    }
})

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

4.独享路由守卫（某一个路由单独的路由守卫）：

route/index.js
beforeEnter((to,from,next)=>{
    if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
        if(){ //权限控制的具体规则
            next() //放行
        }else{
            ....
        }
    }else{
        next() //放行
    }
})

5.组件内路由守卫（某一个路由单独的路由守卫）：

add.vue
//进入守卫，通过路由规则，进入该组件时被调用
beforeRouteEnter(to,from,next){
},

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