本文介绍了Vue中特有的路由组件生命周期钩子actived和deactivated，以及如何通过全局和独享守卫实现路由权限控制。实例展示了beforeEach和afterEach的使用，以及beforeEnter在组件内的权限验证。
11.两个新的生命周期钩子
1.作用:路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
2.具体的名字:
1.actived 路由组件被激活时触发。
2.deactivated路由组件失活时触发。
### 12.路由守卫
1. 作用：对路由进行权限控制
2. 分类：全局守卫、独享守卫、组件内守卫
3. 全局守卫:
```js
//全局前置守卫：初始化时执行、每次路由切换前执行
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'
}
})
```
4. 独享守卫:
```js
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()
}
}
```
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
