Quickly understand Vue routing navigation guards

concept:

"Navigation" means that the route is changing

vue-router The navigation guards provided are mainly used to guard navigation through jump or cancellation. There are multiple opportunities to implant the route navigation process: global, single route-only, or component-level.

Navigation Guard: Including global navigation guards and local navigation guards

1. Global Guard

vue-router has three guards in the global

: Global front guard, before entering the route
: Global parsing guard,beforeRouteEnterCalled after calling (not often used)
: Global back hook, after entering the route

1. Global front guard

You can register a global front guard using:

const router = new VueRouter({ ... })
((to, from, next) =&gt; {
// to and from are routing instances// to: the route to be redirected to// from: The route to leave now// next: function})

next: Function : Be sure to call this method to resolve the hook. The execution effect depends on the calling parameters of the next method.
next() : Perform the next hook in the pipe. If all hooks are executed, the navigation state isconfirmed (Confirmed).
next(false): Interrupt the current navigation. If the browser's URL has changed (maybe it's manual or the browser's back button), the URL address will be reset to the corresponding address 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 objects anywhere to next, and allow options such as replace: true, name: 'home' and anything used in router-linkof to propor options in.
next(error) : (2.4.0+) If the parameter passed to next is an Error instance, the navigation will be terminated and the error will be passed to()Registered callback.

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

When will he let him go, otherwise he will keep circulating.

2. Global analysis guard

2.5.0 New

// Global parsing guard((to,) =&gt; { })

On 2.5.0+ you can use Register a global guard. This and Similar,

Not only before the navigation is confirmed, and after all components are resolved, the parsing guard is called.

3. Global back hook

You can also register global backhooks, however, unlike guards, these hooks do not accept next functions and do not change the navigation itself:

// Global back hook ((to,form) =&gt; { })

because:When afterEach is called, the route has been jumped, so there is no need for next function

3. The guards of exclusive routes

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

for example:GivemainpageThe page is configured with guards separately

{ 
path: '/mainpage', 
name: 'About', 
component: About, // exclusive guardbeforeEnter:(to,from,next) =&gt; {
 if( === '/mainpage/about'){ alert("This is from about") 
   }else{
 alert("This is not from about") 
   }next(); // Must be called for the next operation.  Otherwise it won't jump }
} 
},

4. Guards within components

Finally, you can directly define the following route navigation guards within the routing component:

beforeRouteEnter()：Before entering the route
beforeRouteUpdate()：When routing multiplexing the same component
beforeRouteLeave()：When leaving the current route

Take an example in Product:

// Global parsing guard((to,) =&gt; {
})
// Global back hook((to,form) =&gt; {
})
{
path: '/mainpage',
name: 'About',
component: About,
// exclusive guardbeforeEnter:(to,from,next) =&gt; {
if( === '/mainpage/about'){
alert("This is from about")
}else{
alert("This is not from about")
}
next(); // Must be called for the next operation.  Otherwise it won't jump}
}
},
export default {
// The condition that the guard beforeRouteUpdate in the component is triggered is: the current route changes, but the component is reused.For example：product/ordersarriveproduct/cartThis route，All reused  This component，At this time
beforeRouteUpdateWill be triggered。可以获取arrivethisExample。
A complete navigation analysis process
// Because the component instance has not been created when this hook is called, so this cannot be obtainedbeforeRouteEnter (to, from, next) {
();
// If you want to get an instance// next(vm=&gt;{
// // Here the vm is an instance of the component (this)// });
next();
},
beforeRouteUpdate(to,from,next){
(, );
next();
},
// Call this method when the route is about to leave// For example, if the user edits something, but it still saves it. At this time, he wants to leave this page and remind him that it has not been saved yetlive，Do you want to leave
beforeRouteLeave (to, from, next) {
const leave = confirm("Are you sure you want to leave?");
if(leave) next() // leaveelse next(false) // Don't leave},
}

beforeRouteUpdateThe triggered condition is: the current route changes, but the component is multiplexed.
For example:The route from product/orders to product/cart has reused this component.
beforeRouteUpdateWill be triggered. This instance can be obtained.

5. A complete navigation analysis process

1. Navigation is triggered.
2. Call the Leave Guard in the inactivated component (the page component that is about to leave).beforeRouteLeave
3. Call globalbeforeEach guard.
4. Call in reused componentsbeforeRouteUpdate Guard (2.2+).
5. Call in the routing configuration (the guard that is exclusive to the router)beforeEnter。
6. Parse asynchronous routing components
7. Call in the activated component (the page component that is about to enter).beforeRouteEnter。
8. Call globalbeforeResolve Guard (2.5+).
9. Navigation is confirmed.
10. Call globalafterEach hook. All hooks are triggered.
11. Trigger DOM update.
12. Call with created instancesbeforeRouteEnter The callback function passed to next in the guard.

This is the end of this article about quickly understanding Vue routing navigation guards. For more related contents of Vue routing navigation guards, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!