As its name implies, vue-router navigation guards provided mainly used to jump through or cancel the guards navigation.
There are several opportunities implant route during navigation: global, exclusive of a single route, or component level.
Remember to change the parameters or queries will not trigger into the navigation / left guard. You can observe $route objects
To respond to these changes, or the use of beforeRouteUpdate guard in the assembly.
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) When a navigation triggered global front guards call in order of creation. Guard is analyzed and executed asynchronously, this time navigation has been in waiting until all the guards resolve completely.
Each method receives three guards parameters:
-
to: Route: About to enter the target route object -
from: Route: I was about to leave the current navigation route -
next: Function: Be sure to call this method to resolve this hook. Implementation of the results depend onnextthe call parameters method.
Examples of global navigation guard:
meta:{
auth:true
}
// it is true that the component need to log in
Successful login user information stored localStorage, localStorage.getItem ( 'user'), the user determines the skip, the next step
Jump to login page login does not exist
