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) {
}