Table of contents
(2) Classification of routing guards
(3) Guard inside the component
(1) What is a route guard
Routing guard: some hook functions in the process of routing before and after the jump. These functions allow you to operate some other things. You often see it when setting permissions in the background management. Check whether you have permission before implementing the routing jump , if you have permission, you can pass it, otherwise you will be executed other operations.
(2) Classification of routing guards
(1) Global Guard
beforeEach and afterEach, which have to, from, next parameters
For beforeEach pass three parameters, afterEach pass to, from two parameters
to: For the target object that is about to enter, you can use to.path or to.name to call the properties in the routing object
from: also where it comes from, the route that is currently leaving
next: It is a method, indicating that the release has permission.
The routing guard is written in the index.js under the router. For the convenience of writing, write the data you need in the meta
{
name:'xinwen',
path:'news',
component:News,
meta:{isAuth:true,title:'News'}//Whoever wants to have permission, write it in the routing configuration
},
1. Pre-global routing guard
router.beforeEach((to, from, next) => {
if(to.meta.isAuth){
if(localStorage.getItem('school')==='hkd2'){
next()
}
else{
alert('The school name is wrong, no permission to view')
}
}else{
next()
}
})
2. Rear route guard
Executed after the route jumps, it can be used to change the webpage name after the jump route
// (global rear routing guard) after switching
router.afterEach((to,from)=>{
document.title=to.meta.title||"Little Happy System"
})
(2) Exclusive guard
Note: The exclusive route guard has only a pre-position and no post-position. It is used to set the authority for a certain route separately, and it is configured when configuring the route.
{
name:'xinwen',
path:'news',
component:News,
meta:{isAuth:true, title:'News'},
beforeEnter(to,from,next){
if(to.meta.isAuth){
if(localStorage.getItem('school')==='hkd'){
next()
}
else{
alert('The school name is wrong, no permission to view')
}
}else{
next()
}
}
},
(3) Guard inside the component
Written in the component (.vue)
beforeRouteEnter: Called when entering the component through routing rules
beforeRouteLeave: Called when entering the component through routing rules
export default {
name:'About',
beforeRouteEnter(to,from,next){
console.log('about---beforeRouteEnter',to,from)
if(to.meta.isAuth){
if(localStorage.getItem('school')==='hkd'){
next()
}
else{
alert('The school name is wrong, no permission to view')
}
}else{
next()
}
},
beforeRouteLeave(to,from,next){
console.log('about---beforeRouteLeave',to,from)
next()
}
}