Vue routing guard

Super code force 2022-05-14 12:45:06 阅读数:854

vueroutingguard

effect : Perform permission control on the route

classification : Global guard 、 Exclusive guard 、 Guard inside the assembly

Global guard

// Front guard of the whole situation : Execute on initialization 、 Execute before each route switching
router.beforeEach((to,from,next)=>{
console.log('beforeEach',to,from)
if(to.meta.isAuth){ // Judge whether the current route needs permission control
if(localStorage.getItem('school') === 'atguigu'){ // Specific rules for permission control
next() // release
}else{
alert(' No permission to view ')
// next({name:'guanyu'})
}
}else{
next() // release
}
})
// Rear guard of the whole situation : Execute on initialization 、 Execute after each route switch
router.afterEach((to,from)=>{
console.log('afterEach',to,from)
if(to.meta.title){
document.title = to.meta.title // Modify the of the web page title
}else{
document.title = 'vue_test'
}
})

Exclusive guard

beforeEnter(to,from,next){
console.log('beforeEnter',to,from)
if(to.meta.isAuth){ // Judge whether the current route needs permission control
if(localStorage.getItem('school') === 'atguigu'){
next()
}else{
alert(' No permission to view ')
// next({name:'guanyu'})
}
}else{
next()
}
}

Guard inside the assembly

// Enter the guard : Through routing rules , Called when entering the component
beforeRouteEnter (to, from, next) {},
// Leave the guard : Through routing rules , Called when leaving the component
beforeRouteLeave (to, from, next) {}
版权声明:本文为[Super code force]所创,转载请带上原文链接,感谢。 https://qdmana.com/2022/134/202205141239093025.html