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

This article mainly explains "how to understand the navigation hook in Vue-Router". 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 understand the navigation hook in Vue-Router".

Navigation guard

Navigation indicates that the route is changing.

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.

1. Global front guard-router.beforeEach

Router.beforeEach registers a global front guard:

Const router = new VueRouter ({...}) router.beforeEach ((to, from, next) = > {/ / to: which page to go / / from: where to come from / / next: it is a function. / / if you directly release next () / / if you want to skip to another page next (other pages)})

Sample code:

Router.beforeEach (async (to, from, next) = > {NProgress.start () / / Open the progress bar const token = store.state.user.token const userId = store.state.user.userInfo.userId console.log (token, to.path) From.path) if (token) {if (to.path = ='/ login') {/ / have token and go to login next ('/') NProgress.done () / close the progress bar} else {/ / have token Go to other pages and release if (! userId) {await store.dispatch ('user/getUserInfo')} next ()} else {if (to.path =' / login') {/ / No token, go to login, release next ()} else {next ('/ login') / / without token, go to other pages NProgress.done ()}}) Summary

Router.beforeEach (callback (three parameters))

In the navigation guard function, be sure to call next ()

To.path: to is a routing object, and path represents a path, which is one of its attributes

two。 Global rear hook-router.afterEach

Router.afterEach registers a global rear hook:

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

Router.afterEach ((to, from) = > {/ /...}) 3. Global analysis guard-router.beforeResolve

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.

4. 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) = > {/ /...}}]}) 5. Guards within the 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. / / access to component instance `this`}, beforeRouteLeave (to, from, next) {/ / call / / access component instance `this`} complete navigation resolution process when navigating away from the corresponding route of the component

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 understand the navigation hook in Vue-Router". After the study of this article, I believe you have a deeper understanding of how to understand the navigation hook in Vue-Router, 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.