路由守卫(全局守卫、独享守卫、组件内守卫)
2022-06-09 本文已影响0人
冰点雨
1.作用:对路由器进行权限控制
2.分类:全局守卫、独享守卫、组件内守卫
全局守卫
// 全局前置守卫,初始化时执行,每次路由切换前执行
router.beforeEach((to,from,next)=>{
if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
if(localStorage.getItem('school') == "aiguigu"){
next()//执行
}else{
alert('暂无权限查看')
}
}else{
next()
}
})
// 全局后置守卫,初始化时执行,每次路由切换后执行
router.afterEach((to,from,next)=>{
if(to.meta.title){
document.title = to.meta.title //修改网页的title
}else{
document.title = "vue_test"
}
})
独享守卫
beforeEnter:(to,from,next)=>{
if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
if(localStorage.getItem('school') == "aiguigu"){
next()//执行
}else{
alert('暂无权限查看')
}
}else{
next()
}
}
组件内守卫
//进入守卫,通过路由规则,进入该组件时被调用
beforeRouterEnter(to,from,next){
if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
if(localStorage.getItem('school') == "aiguigu"){
next()//执行
}else{
alert('暂无权限查看')
}
}else{
next()
}
},
//离开守卫,通过路由规则,离开该组件时被调用
beforeRouterLeave(to,from,next){
},