vue路由守卫

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

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

3.全局守卫:

//全局前置守卫:初始化时执行、每次路由切换前执行
router.beforeEach((to,from, next)=>{
    console.log( ' beforeEach',to,from)
    if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
        if(localStorage.getItem( 'school') =z= 'atguigu '){ //权限控制的具体规则
            next()//放行
        }else{
            alert('暂无权限查看')l/l next({name : ' guanyu '})
    }
    }else{
    	next()//放行
    }
})
//全局后置守卫:初始化时执行、每次路由切换后执行router.afterEach((to,from)=>{
    console.log( 'afterEach ',to,from)
    if(to.meta.title){
        document.title = to.meta.title //修改网页的title}else{
        document.title = 'vue_test'
    }
})

4.独享守卫:

beforeEnter(to,from,next){
    console.log( ' beforeEnter ' ,to,from)
    if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
    	if(localstorage.getItem( 'school ') === 'atguigu '){
    		next()
        }else{
        	alert( '暂无权限查看')l / next({name: ' guanyu ' })
        }
    }else{
    	next()
    }
}

5.组件内守卫:

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

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

}