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

This article mainly introduces "which kinds of vue routing hook functions". In daily operation, I believe many people have doubts about which vue routing hook functions are. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "which vue routing hook functions are?" Next, please follow the editor to study!

There are two kinds of vue routing hook functions, which are: 1, global guard (global hook function), which refers to the router object in "index.js"; 2, routing guard (for a single routing hook function); and 3, component guard (component-level hook function), which is defined within the routing component.

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

The hook function of vue-router is actually talking about navigation guards.

To quote the official website.

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.

That is: global guard (global hook function), routing guard (for a single routing hook function), component guard (component-level hook function).

Build the code demonstration environment

Let's simply set up the environment.

Index.js

Import {createRouter, createWebHashHistory} from 'vue-router' Const router = createRouter ({history: createWebHashHistory (), routes: [{path:'/ averse, component: () = > import ('.. / components/A.vue'),}, {path:'/ baked, component: () = > import ('.. / components/B.vue'),}, {path:'/ c' Component: () = > import ('.. / components/C.vue'),},],}) Export default router

Main.js

/ / index.jsimport router from ". / router"; createApp (App) .use (router) .mount ("# app")

Page A

I'm page A.

Page B

I'm page B.

Page C

I'm page C.

General component

I'm a common component.

The current page is like this, a little ugly, let's take a look at it, we are not here to learn css

Global guard

As the name implies, it is defined globally, that is, the router object in our index.js.

BeforeEach

The global front guard, which is triggered before the route jumps, is triggered every time you navigate.

Register a global front guard through router.beforeEach.

Parameters.

The beforeEach global front guard receives three parameters

To: Route: the destination routing object to be entered

From: Route: the routing object from which the current navigation is leaving

Next: Function: be sure to call this method or it will block the route.

Note: the next parameter may not be added, but once it is added, it must be called once, otherwise the route jump and so on will stop.

Several cases of next () method

Next (): proceed to the next hook in the pipe.

Next (false): interrupts the current navigation. Go back to the address of the from route.

Next ('/') or next ({path:'/'}): jump to a different address and pass the same parameters as the options in router.push.

Next (error): the navigation terminates and the error is passed to the callback registered by router.onError ().

Let's print out the first two parameters and have a look at them. They contain paths, parameters, meta-information and so on.

Return value

False: cancels the current navigation.

Null,undefined,true or direct return: call the next navigation guard.

Define multiple guards

Global front guards can be defined and called according to the order in which they are created. The navigation is waiting until all the guards are finished.

In the following example, we define two beforeEach global front guards. As you can see, the page jumps only after two logs are printed two seconds later.

Except for the beforeEach global front guard, all other global guards can define multiple guards, and the navigation is waiting until all the guards are complete, so the other hook functions will not be demonstrated.

BeforeResolve

The global resolution guard, which is triggered after all component guards and asynchronous routing components are parsed before the route jump, is also triggered every time you navigate.

Register a global parsing guard through router.beforeResolve.

Router.beforeResolve ((to, from, next) = > {next ();})

Callback parameter, the return value is the same as beforeEach. You can also define multiple global resolution guards.

AfterEach

The global rear hook, which occurs after the route jump is completed, after beforeEach and beforeResolve, and before the beforeRouteEnter (intra-component guard). It also triggers every time you navigate.

Register a global rear hook through router.afterEach.

The two parameters of this hook are the same as to and from in beforeEach. Unlike other global hooks, however, these hooks do not accept next functions and do not change the navigation itself.

Routing guard

As the name implies, it is the hook related to routing. We have only one routing guard, that is, beforeEnter.

BeforeEnter

The beforeEnter guard needs to be defined on the routing configuration, which is triggered only when entering the route, followed by beforeEach, and not triggered when params, query, or hash changes.

The parameters of the beforeEnter routing guard are to, from, next, the same as beforeEach.

Component guard

As the name implies, it is a guard defined within a routing component.

BeforeRouteEnter

Called before the route enters the component, the hook is called after the global guard beforeEach and the routing guard beforeEnter, and before the global beforeResolve and global afterEach.

Parameters include to,from,next.

The instance of the component cannot be accessed within the guard, that is, the this is undefined, that is, it triggers before the beforeCreate life cycle.

BeforeRouteUpdate

For beforeRouteUpdate, this is already available, so there is no need to pass a callback to next.

BeforeRouteLeave

For beforeRouteLeave, this is already available, so there is no need to pass a callback to next.

Summarize the complete navigation parsing process

Navigation is triggered.

Invoke the beforeRouteLeave guard in the deactivated component.

Call the global beforeEach guard.

Invoke the beforeRouteUpdate guard in a reused component.

Call beforeEnter in the routing configuration.

Parse the asynchronous routing component.

Call beforeRouteEnter in the activated component.

Call the global beforeResolve guard.

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.

The above is the official answer, now let's use the flow chart to show it visually.

At this point, the study of "what are the vue routing hook functions" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.