Vue 2.x – 两个新的生命周期钩子/路由守卫

Ne-21 • 2021-08-29 • 编程技术 • 312 阅读

11.两个新的生命周期钩子

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
具体名字：
1. activated路由组件被激活时触发。
2. deactivated路由组件失活时触发。

12.路由守卫

作用：对路由进行权限控制
分类：全局守卫、独享守卫、组件内守卫

全局守卫:

//全局前置守卫：初始化时执行、每次路由切换前执行
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()
}
}