1. 作用：通过跳转或取消的方式守卫导航，对路由进行权限控制。
2. 分类：全局守卫（全局前置守卫，全局后置守卫）、独享守卫、组件内守卫
一、全局前置守卫
作用：初始化时执行、每次路由切换前执行。只要项目中有任何路由变化，全局守卫都会进行拦截【符合条件继续访问，不符合条件不能访问】。
代码实现：
在router/index.js中
outer.beforeEach((to,from,next)=>{
//to:去的那个路由的信息
//from:从那个路由而来的信息
//next:放行函数!!!!!!
//第一种：next(),放行函数，放行到它想去的路由！！！
//第二种:next(path),守卫指定放行到那个路由去?
console.log('beforeEach',to,from)
if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
next() //放行
}else{
alert('暂无权限查看')
// 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'
}
})
三、路由独享守卫
作用：针对某一个路由的守卫，需要在配置路由的地方使用。
代码实现：
beforeEnter(to,from,next){
console.log('beforeEnter',to,from)
if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
if(localStorage.getItem('school') === 'atguigu'){
next()
}else{
alert('暂无权限查看')
// next({name:'guanyu'})
}
}else{
next()
}
}
四、组件内守卫 （一般很少用【全局 + 路由独享守卫】）
作用：也是负责某一个路由守卫，需要书写在组件内部。
代码实现：
//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
}
