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

This article is about how many hooks vue-router has. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

There are 7 hooks: 1, beforeEach;2, beforeResolve;3, afterEach;4, beforeEnter;5, beforeRouteEnter;6, beforeRouteUpdate;7, beforeRouteLeave.

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

How many hook functions does vue-router have? What exactly is it and what is the implementation process?

Let's start with the mind map.

Analysis.

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, routing guard, component guard.

Build the code demonstration environment

Let's simply set up the environment.

Index.js

/ * * @ Description: a wake warbler * @ Date: 2021-03-21 16:17:56 * @ LastEditTime: 2021-07-18 15:14:42 * @ FilePath:\ vite-project-js\ src\ router\ 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.

Thank you for reading! This is the end of the article on "how many hooks does vue-router have". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.