1: Global navigation hook function
1. vue (global front guard)
The hook function of beforeEach is a global before hook function, (before each) means that it must be executed every time each route changes.
Its three parameters:
-
to: (Route route object) The target that is about to enter The attributes of the route object to object: path params query hash fullPath matched name meta (under matched, but this example can be used directly) -
from: (Route route object) The route that the current navigation is about to leave -
next: (Function function) Be sure to call this method to resolve the hook. Call method: next (parameter or empty) *** Must call - next(When there is no parameter):Perform the next hook in the pipeline. If you go to the last hook function, the navigation state is confirmed (confirmed)
- next('/') or next({ path: '/' }):Jump to a different address. The current navigation is interrupted and a new navigation is performed.
- Application scenarios:You can perform some page jump pre-processing, such as intercepting the page you need to log in and doing login jump! !
((to, from, next) => {
if () {
//Discern whether the route requires login permission if (cookies('token')) {
//Read the token through the encapsulated cookies. If it exists, name will follow the next step. If it does not exist, then jump back to the login page. next()//Don't add "path:/" to next, it will fall into a dead loop }
else {
next({
path: '/login',
query: {redirect: }//Please the jumped route path as a parameter, and jump to the route after logging in successfully })
}
}
else {
next()
}
})Application scenarios, login judgment on page, administrator authority judgment, browser judgment
//Use the hook function to transfer permissions to the route((to, from, next) => {
const role = ('ms_username');
if(!role && !== '/login'){
next('/login');
}else if(){
// If it is administrator permission, you can enter. This is just a simple simulation of administrator permissions. role === 'admin' ? next() : next('/403');
}else{
// Simple judgment: IE10 and below do not enter rich text editors, and this component is incompatible if(('MSIE') > -1 && === '/editor'){
.$alert('The vue-quill-editor component is not compatible with IE10 and below browsers, please use a higher version of the browser to view', 'Browser Incompatible Notification', {
confirmButtonText: 'Sure'
});
}else{
next();
}
}
})2. vue (global rear guard)
It is before the page is loaded, and on the contrary after the page is loaded
2: The guards exclusively for routes (the hooks inside the route)
You can directly define the beforeEnter guard on the routing configuration:
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]These guards have the same method parameters as global front guards.
Three: Guards within the component (hook inside the component)
1、beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// Called before rendering the corresponding route of the component is confirmed // No! able! Get component instance `this` // Because the component instance has not been created before the hook is executed },
beforeRouteUpdate (to, from, next) {
// Called when the current route changes, but the component is reused // For example, for a path with dynamic parameters /foo/:id, when jumping between /foo/1 and /foo/2, // Since the same Foo component is rendered, component instances are reused. And this hook will be called in this case. // Component instances can be accessed `this` },
beforeRouteLeave (to, from, next) {
// Called when navigation leaves the corresponding route of this component // Component instances can be accessed `this` }2. Application scenarios of routing hooks in actual development
(I) Clear the timer in the current component
When there is a timer in a component, when the route is switched, you can use beforeRouteLeave to make the timer clear to avoid consuming memory:
beforeRouteLeave (to, from, next) {
() //Clear timer next()
}(II) When there is an unclosed window or unsaved content on the page, the page will be blocked from jumping
If there is important information on the page that needs to be saved by the user before jumping, or there is a pop-up box. The user should be prevented from jumping, combined with vuex status management (whether the dialogVisibility is saved)
beforeRouteLeave (to, from, next) {
//Judge whether the status of the pop-up box is displayed and whether the information is saved is not saved. if ( === true) {
= false //Close the pop-up box next(false) //Back to the current page and prevent the page from jumping }else if( === false) {
alert('Please save the information and exit!') //Popular warning next(false) //Back to the current page and prevent the page from jumping }else {
next() //Otherwise, jump is allowed }(III) Save relevant content in Vuex or Session
When the user needs to close the page, the public information can be saved to session or Vuex
beforeRouteLeave (to, from, next) {
(name, content); //Save to localStorage next()
}vue-router execution order
- Navigation is triggered.
- Call the beforeRouteLeave guard in the inactivated component.
- Call the global beforeEach guard.
- Call the beforeRouteUpdate guard (2.2+) in the reused component.
- Call beforeEnter in the routing configuration.
- Resolve asynchronous routing components.
- Call beforeRouteEnter in the activated component.
- Call the global beforeResolve guard (2.5+).
- Navigation is confirmed.
- Calls the global afterEach hook.
- Triggers DOM update.
- Call the callback function passed to next in the beforeRouteEnter guard, and create a good component instance.
- Pass in as a parameter to the callback function.
The above is personal experience. I hope you can give you a reference and I hope you can support me more.