后置路由守卫(afterEach)
既然有前置路由，那么相对的也有后置路由，在初始化的时候和每次路由切换之后被调用，它也有to和from并且和前置守卫的作用是一样的，区别就是前置路由有next，后端路由主要是做切换后的工作
改变页签效果
这时候我想要加一个功能，点击哪个路由会把对应的页签也换成这个路由的名称我们
首先要给每一个路由增加对应的页签名称，可以存放到meta里面，这时候用后置路由实现最合适不过，但是最好把index.html里面的title名称也改掉
独享路由守卫(beforeEnter)
顾名思义就是某一个路由单独享用的守卫，它同样会收到to,from,next三个参数，逻辑和全局守卫一样
比如只想对news路由做出限制，其他的路由不管
值得注意的是它是配置路由里面的一个属性，并且它只有前置没有后置，独享的前置路由守卫和全局的后置路由守卫可以配合使用
功能其实和全局守卫是一样的，只不过全局路由守卫可以控制多个，而它只能控制一个
组件内路由守卫
这是最好一种路由守卫，和前面几种都不同，它是在组件里面去写的路由守卫，而不是在路由配置文件里面写的路由守卫，可以说这种路由守卫是独享路由守卫和全局守卫的结合体，只不过是在组件里面编写的
这种路由守卫使用的场景比较少，如果想在组件里面写点这个组件独有的逻辑，可以借助这种守卫，组件内路由守卫也是可以和全局后置守卫互用的
beforeRouteEnter(进入守卫)
路由进入之前 通过路由规则进入该组件时被调用，可以把全局前置路由那一套鉴权规则写道这里面
beforeRouteLeave(离开守卫)
路由进入之后 通过路由规则离开该组件时被调用
总结
- 作用：对路由进行权限控制
- 分类：全局守卫、独享守卫、组件内守卫
- 全局守卫:
//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
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) {
}
