Quick understanding of Vue routing navigation guard

concept:

"Navigation" means the route is changing

The navigation guard provided by vue-router is mainly used to guard navigation by jumping or canceling. There are multiple opportunities to hook into the route navigation process: globally, specifically for a single route, or at the component level.

Navigation guards : including global navigation guards and local navigation guards

1. Global Guard

vue-router has three global guards

• router.beforeEach : global front guard, before entering the router
• router.beforeResolve : Global resolution guard, called after beforeRouteEnter is called (not commonly used)
  
• router.afterEach : global post-hook, after entering the route

1. Global front guard

You can register a global before guard using router.beforeEach:

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// to and from are both routing instances // to: the route to jump to // from: the current route to leave // ​​next: function })

• next: Function : This method must be called to resolve this hook. The execution effect depends on the calling parameters of the next method.
• next() : Proceed to the next hook in the pipeline. If all hooks are executed, the navigation status is confirmed .
• next(false) : interrupt the current navigation. If the browser URL changes (either manually by the user or by pressing the browser back button), the URL address will be reset to the address corresponding to the from route.
• next('/') or next({ path: '/' }) : Jump to a different address. The current navigation is interrupted and a new navigation is performed. You can pass an arbitrary location object to next , and that allows setting options like replace: true , name: 'home' , and any options used in to prop of router-link or router.push .
• next(error) : (2.4.0+) If the argument passed to next is an Error instance, navigation will be aborted and the error will be passed to the callback registered with router.onError() .
  

Note: If it is next('/') or next({ path: '/' }), as long as the path to be released is included, there must be a judgment before it.

Let him go sometime, otherwise he will keep repeating the cycle.

2. Global resolution guard

2.5.0 New

// Global resolution guard router.beforeResolve((to,from.next) => { })

In 2.5.0+ you can register a global guard with router.beforeResolve . This is similar to router.beforeEach , except

Resolve guards are called before navigation is confirmed and after all component guards and async route components are resolved.

3. Global post-hook

You can also register global after-hooks, however unlike guards these hooks do not receive a next function and do not modify the navigation itself:

// Global post-hook router.afterEach((to,form) => { })

Because: When afterEach is called, the route has already been redirected, so there is no need for the next function

3. Router-exclusive guard

If you do not want to configure routing globally, you can configure guards for certain routes separately.

For example: configure a separate guard for mainpage page

{ 
path: '/mainpage', 
name: 'About', 
component: About, // Routing exclusive guard beforeEnter:(to,from,next) => {
 if(from.name === '/mainpage/about'){ alert("This is from about") 
   }else{
 alert("This is not from about") 
   }next(); // Must be called to perform the next step. Otherwise it will not jump.}
} 
},

4. Guards within components

Finally, you may define the following route navigation guards directly within your route component:

• beforeRouteEnter()： before entering the route
• beforeRouteUpdate()： When the route reuses the same component
• beforeRouteLeave()： When leaving the current route
  

Take an example in Product:

// Global resolution guard router.beforeResolve((to,from.next) => {
})
// Global post-hook router.afterEach((to,form) => {
})
{
path: '/mainpage',
name: 'About',
component: About,
// Routing exclusive guard beforeEnter:(to,from,next) => {
if (from.name === '/mainpage/about') {
alert("This is from about")
}else{
alert("This is not from about")
}
next(); // Must be called to perform the next operation. Otherwise it will not jump.}
}
},
export default {
// The condition for the component's internal guard beforeRouteUpdate to be triggered is: the current route changes, but the component is reused.
For example, the route from product/orders to product/cart reuses the Product.vue component, and beforeRouteUpdate will be triggered. You can get this instance.
A complete navigation parsing process // Because the component instance has not been created when this hook is called, this cannot be obtained
beforeRouteEnter (to, from, next) {
console.log(to.name);
// If you want to get the instance // next(vm=>{
// // The vm here is the instance of the component (this)
// });
next();
},
beforeRouteUpdate(to,from,next){
console.log(to.name, from.name);
next();
},
// This method is called when the route is about to leave // ​​For example, the user edited something but has not saved it yet. At this time, he wants to leave this page, so we need to remind him that he has not saved it yet and asks him whether he wants to leave beforeRouteLeave (to, from, next) {
const leave = confirm("Are you sure you want to leave?");
if(leave) next() // leave else next(false) // do not leave },
}

• beforeRouteUpdate is triggered when the current route changes but the component is reused.
• For example, the route from product/orders to product/cart reuses the Product.vue component.
• beforeRouteUpdate will be triggered. You can get this instance.

5. A complete navigation analysis process

• 1. Navigation is triggered.
• 2. Call the leaving guard in the deactivated component (the page component that is about to leave). beforeRouteLeave
• 3. Call the global beforeEach guard.
• 4. Call the beforeRouteUpdate guard in the reused component (2.2+).
• 5. Call beforeEnter (a route-specific guard) in the route configuration.
• 6. Parsing asynchronous routing components
• 7. Call beforeRouteEnter in the activated component (the page component that is about to be entered).
• 8. Call the global beforeResolve guard (2.5+).
• 9. Navigation is confirmed.
• 10. Call the global afterEach hook. All hooks have been triggered.
• 11. Trigger DOM update.
• 12. Use the created instance to call the callback function passed to next in beforeRouteEnter guard.

This is the end of this article about quickly understanding Vue routing navigation guards. For more relevant Vue routing navigation guard content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!