Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use the navigation guard of vue". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use the navigation guard of vue.

Navigation guards are: 1, global front guard "beforeEach"; 2, global resolution guard "beforeResolve"; 3, routing exclusive guard "beforeEnter"; 4, component guard "beforeRouteEnter", "beforeRouteLeave".

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

The navigation guards provided by vue-router are mainly used to guard navigation by jumping or canceling. There are many opportunities to be implanted in the routing navigation process: global, exclusive to a single route, or component-level.

Keep in mind that changes in parameters or queries do not trigger entry / exit navigation guards. You can respond to these changes by observing the $route object, or by using beforeRouteUpdate's in-component guards.

Global front guard

You can use router.beforeEach to register a global front guard:

Const router = new VueRouter ({...}) router.beforeEach ((to, from, next) = > {/ /...})

When a navigation is triggered, the global front guard is called in the order in which it is created. The guard is executed asynchronously, and the navigation is waiting until all the guards have finished resolve.

Each guard method receives three parameters:

To: Route: the destination routing object to be entered

From: Route: the route from which the current navigation is leaving

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 (): proceed to the next hook in the pipe. If all the hooks are finished, the navigation status is confirmed (confirmed).

Next (false): interrupts the current navigation. If the URL of the browser changes (either manually by the user or by the browser back button), the URL address is reset to the address of the from route.

Next ('/') or next ({path:'/'}): jump to a different address. The current navigation is interrupted and a new navigation is carried out. You can pass objects anywhere to next, and allow you to set options such as replace: true, name: 'home', and any options used in router-link 's to prop or router.push.

Next (error): (2.4.0+) if the parameter passed in next is an Error instance, the navigation is terminated and the error is passed to the callback registered by router.onError ().

Make sure that the next function is called strictly once in any given navigation guard. It can occur more than once, but only if all logical paths do not overlap, otherwise the hook will never be parsed or reported as an error. Here is an example of redirecting to / login when a user fails to authenticate:

/ / BADrouter.beforeEach ((to, from, next) = > {if (to.name! = = 'Login' & &! isAuthenticated) next ({name:' Login'}) / / if the user fails to verify identity, `next` will be called next ()} twice / / GOODrouter.beforeEach ((to, from, next) = > {if (to.name! = = 'Login' & &! isAuthenticated) next ({name:' Login'}) else next ()}) global resolution guard

2.5.0 New

At 2.5.0 + you can register a global guard with router.beforeResolve. This is similar to router.beforeEach, except that the parsing guard is invoked before the navigation is confirmed and after the guard and asynchronous routing components are parsed within all components.

A guard exclusive to routing.

You can define beforeEnter guards directly 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 the global front guard.

Guards within the component

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

BeforeRouteEnter

BeforeRouteUpdate (2.2 New)

BeforeRouteLeave

Const Foo = {template: `...`, beforeRouteEnter (to, from, next) {/ / call / / No before rendering the corresponding route for this component by confirm! Yes! Get component instance `this` / / because the component instance has not been created before the guard executes}, beforeRouteUpdate (to, from, next) {/ / the current route changes, but the component is called / / for example, for a path / foo/:id with dynamic parameters, when it jumps between / foo/1 and / foo/2 / / because the same Foo component is rendered, the component instance is reused. And this hook will be called in this case. / / can access component instance `this`}, beforeRouteLeave (to, from, next) {/ / call / / access component instance `this`} when navigating away from the corresponding route of the component

The beforeRouteEnter guard cannot access the this because the guard is called before the navigation is confirmed, so the upcoming new component has not been created.

However, you can access the component instance by passing a callback to next. The callback is performed when the navigation is confirmed, and the component instance is used as a parameter to the callback method.

BeforeRouteEnter (to, from, next) {next (vm = > {/ / access component instance} via `vm`)}

Note that beforeRouteEnter is the only guard that supports passing callbacks to next. For beforeRouteUpdate and beforeRouteLeave, this is already available, so passing callbacks is not supported because it is no longer necessary.

BeforeRouteUpdate (to, from, next) {/ / just use `this` this.name = to.params.name next ()}

This leave guard is usually used to prevent the user from leaving suddenly before saving the changes. The navigation can be cancelled via next (false).

BeforeRouteLeave (to, from, next) {const answer = window.confirm ('Do you really want to leave? you have unsaved changes') If (answer) {next ()} else {next (false)}} complete navigation resolution process

Navigation is triggered.

Invoke the beforeRouteLeave guard in the deactivated component.

Call the global beforeEach guard.

Invoke the beforeRouteUpdate guard (2.2 +) in the reused component.

Call beforeEnter in the routing configuration.

Parse the asynchronous routing component.

Call beforeRouteEnter in the activated component.

Call the global beforeResolve guard (2.5 +).

Navigation confirmed.

Call the global afterEach hook.

Triggers a DOM update.

Call the callback function passed to next in the beforeRouteEnter guard, and the created component instance will be passed as a parameter to the callback function.

Thank you for your reading, the above is the content of "how to use the navigation guards of vue". After the study of this article, I believe you have a deeper understanding of how to use the navigation guards of vue, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.