1、作用:对路由进行权限控制
2、分类:全局守卫、独享守卫、组件内守卫
3、全局守卫
//全局前置路由守卫 ----每次路由切换之前调用
router.beforeEach((to, from, next)=>{
console.log("全局前置路由守卫被调用了");
if (to.meta.isAuth) {//判断是否需要鉴权
if (localStorage.getItem("school")==='xuexiao') {
next();
}else {
alert("学习名不对。无权限查看")
}
}else {
next();//放行
}
});
//全局前置路由守卫 ----每次路由切换之后被调用
router.afterEach((to, from)=>{
console.log("全局后置路由守卫被调用了");
document.title = to.meta.title || '系统';
});
4、独享路由守卫
beforeEnter:(to,from,next)=>{
console.log("独享路由守卫被调用了");
if (to.meta.isAuth) {//判断是否需要鉴权
if (localStorage.getItem("school")==='xuexiao') {
next();
}else {
alert("学习名不对。无权限查看")
}
}else {
next();//放行
}
}
5、组件内路由守卫
//组件内路由守卫
//通过路由规则,进入该组件时被调用
beforeRouteEnter(to,from,next){
console.log('app---beforeRouteEnter');
//判断是否需要鉴权
if (to.meta.isAuth){
if(localStorage.getItem("scholl")==="atgugu"){
next();
}else {
alert("学校名不对,无权查看");
}
} else {
next();
}
},
//通过路由规则,离开该组件时被调用
beforeRouteleave(to,from,next){
console.log('app---beforeRouteleave');
next();
},