How many types of vue routing hook functions are there? What are the differences?

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

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

vue-router's Hook function actually refers to Navigation guard.

Quote from the official website

"Navigation" indicates that the routing is changing.

vue-router The navigation guard provided is mainly used to jump or cancel Guard Navigation. There are multiple opportunities to build into the route navigation process: globally, exclusive to a single route, or at the component level.

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

Code Demonstration Environment Construction

First briefly set up the environment

index.js

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/a',
      component: () => import('../components/A.vue'),
    },
    {
      path: '/b',
      component: () => import('../components/B.vue'),
    },
    {
      path: '/c',
      component: () => import('../components/C.vue'),
    },
  ],
});
export default router;

main.js

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

PageA

<template>
  <div>
    <h1>我是页面A啊</h1>
    <comp></comp>
  </div>
</template>

PageB

<template>
  <div>
    <h1>我是页面B啊</h1>
    <comp></comp>
  </div>
</template>

PageC

<template>
  <div>
    <h1>我是页面C啊</h1>
    <comp></comp>
  </div>
</template>

General Components

<template>
  <div>我是公用组件啊</div>
</template>

The current page is like this, a bit ugly, let’s just watch it, we are not here to learn css

Global Guard

As the name suggests, it is defined globally, which is the router object in our index.js.

beforeEach

Global front guard, triggered before route jump, it will be triggered every time navigation.

Register a global beforeEach guard through router.beforeEach.

Parameters

beforeEach The global front guard receives three parameters

• to : Route: The target route object that is about to enter
• from: Route: The route object that the current navigation is about to leave
• next: Function: This method must be called otherwise routing will be blocked.

Note: next Parameters do not need to be added, but once added, they must be called once, otherwise routing jumps, etc. will stop.

next() Several situations of the method

• next(): Proceed to the next hook in the pipeline.
• next(false): Interrupt current navigation. Return to the address corresponding to the from route.
• next('/') or next({ path: '/' }): Jump to a different address, the parameters that can be passed are the same as router.push The options are the same.
• next(error): Navigation terminates, and the error will be passed to the router.onError() registered callback.

Let’s print out the first two parameters and take a look. They contain paths, parameters, meta-information, etc.

Return value

• false: Cancel the current navigation.
• null, undefined, true or direct return: Call the next navigation guard.

Define multiple guards

You can define multiple global front guards and call them according to the order of creation. Navigation is pending until all guards are completed.

In the following example, we define two beforeEach global pre-guards. It can be seen that the page jump occurs only after two logs are printed out two seconds later.

Except beforeEach global front guard, other global guards can be defined multiple times, and The navigation is waiting until all guards are completed, and other hook functions will not be demonstrated.

beforeResolve

Global parsing guard, before routing jump, all internal guards and asynchronous routing components are triggered after being parsed, it is the same Fired on each navigation.

Register a global resolution guard through router.beforeResolve.

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

Callback parameter, return value is the same as beforeEach. It is also possible to define multiple global parsing guards.

afterEach

Global post hook, it occurs after the route jump is completed, beforeEach and beforeResolve, beforeRouteEnter (component inner guard) before. It also fires every time you navigate.

Register a global post hook through router.afterEach.

The two parameters of this hook are the same as to and from in beforeEach. However, unlike other global hooks, these hooks will not accept the next function, nor will they change the navigation itself.

Route Guard

As the name suggests, it is a hook related to routing. We have only one routing guard, which is beforeEnter.

beforeEnter

You need to define the beforeEnter guard on the routing configuration. This guard is only triggered when entering the route and is executed immediately after beforeEach. Will not fire when params, query or hash changes.

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

Component guard

As the name suggests, it is a guard defined inside the routing component.

beforeRouteEnter

is called before the route enters the component. This hook is in the global guard beforeEach and the route guard beforeEnter After, global beforeResolve and before global afterEach are called.

Parameters include to, from, next.

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

beforeRouteUpdate

For beforeRouteUpdate, this is already available, so give next Passing a callback is not necessary.

beforeRouteLeave

For beforeRouteLeave, this is already available, so give next Passing a callback is not necessary.

Summary

Complete navigation parsing process

1. Navigation is triggered.
2. Call the beforeRouteLeave guard in the deactivated component.
3. Call the global beforeEach guard.
4. Call the beforeRouteUpdate guard in the reused component.
5. Call beforeEnter in the routing configuration.
6. Resolve asynchronous routing components.
7. Call beforeRouteEnter in the activated component.
8. Call the global beforeResolve guard.
9. Navigation confirmed.
10. Call the global afterEach hook.
11. Trigger DOM update.
12. Call the callback function passed to next in the beforeRouteEnter guard, and the created component instance will be passed in as a parameter of the callback function.

The above is the official answer. Now we use a flow chart to visually display it.

Related recommendations: "vue.js Tutorial"

The above is the detailed content of How many types of vue routing hook functions are there? What are the differences?. For more information, please follow other related articles on the PHP Chinese website!