What are the navigation hooks of vue?

Vue has three types of navigation hooks: 1. Global guard hook, which refers to the hook function that operates directly on the routing example. The characteristic is that all routing configuration components will be triggered. 2. Route exclusive guard hook refers to a hook function that can also be set when configuring a single route, and can only work under this route. 3. Local guard hook refers to the hook function executed within the component, similar to the life cycle function in the array, which is equivalent to the life cycle hook function added for the component configured with routing.

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

The role of navigation hook

• The navigation hook provided by vue-router is mainly used to intercept navigation. Let it complete the jump or cancel.

Classification of navigation hooks

• Global guard
• Route independent Enjoy guard
• Local guard

1. Global guard

refers to the hook that operates directly on the routing example Function, the characteristic is that all routing configuration components will be triggered. To put it simply, triggering routing will trigger these hook functions. The execution order of hook functions includes beforeEach, beforeResolve, and afterEach.

<strong>[beforeEach]</strong>: Triggered before the route jumps. The parameters include to, from, and next. The main function of this hook is It is used for login verification, that is, it is notified in advance before the route jumps, so as to avoid notifying it after it jumps and it is too late.

 router.beforeEach  router.beforeResolve  router.afterEach
    const router = new VueRouter({ ... });
    router.beforeEach((to, from, next) => {
        // do someting
    });

• to: represents the target to enter, it is a routing object
• from: represents the route that is currently leaving, also a routing object
• next: This is a method that must be called, and the specific execution effect depends on the parameters of the next method call

<strong>[beforeResolve]</strong> : This hook is similar to beforeEach. It is also triggered before the route jumps. It also has three parameters: to, from, and next. The official explanation of the difference with beforeEach is:

The difference is before the navigation is confirmed. , and after the guards and asynchronous routing components in all components are parsed, the parsing guard will be called.

That is, it is called after beforeEach and beforeRouteEnter in the component, after afterEach, and before afterEach.

<strong>[afterEach]</strong>: Contrary to beforeEach, it is triggered after the route jump is completed. The parameters include to and from, which are gone. next, it occurs after beforeEach and beforeResolve, and before beforeRouteEnter (footprint inside guard).

 const router = new VueRouter({ ... });
    router.beforeEach((to, from, next) => {
        // do someting
    });
  //全局后置钩子，后置钩子并没有 next 函数，也不会改变导航本身
    router.afterEach((to, from) => {
        // do someting
    });

2. Route exclusive guard

refers to the hook function that can also be set when configuring a single route, and can only work under this route. Its location is as follows, that is, components like File have such hook functions. Currently it only has one hook function beforeEnter.

[beforeEnter]: It is exactly the same as beforeEach. If both are set, it will be executed immediately after beforeEach. The parameters are to, from, next.

  cont router = new VueRouter({
        routes: [
            {
                path: '/file',
                component: File,
                beforeEnter: (to, from ,next) => {
                    // do someting
                }
            }
        ]
    });

3. Local guard

refers to the hook function executed within the component, similar to the life cycle function in the array, equivalent to Lifecycle hook function added for the component configured with routing. The hook functions include beforeRouteEnter, beforeRouteUpdate (new in 2.2), and beforeRouteLeave in order of execution. The execution location is as follows:

 const File = {
        template: `<div>This is file</div>`,
        beforeRouteEnter(to, from, next) {
            // do someting
            // 在渲染该组件的对应路由被 confirm 前调用
        },
        beforeRouteUpdate(to, from, next) {
            // do someting
            // 在当前路由改变，但是依然渲染该组件是调用
        },
        beforeRouteLeave(to, from ,next) {
            // do someting
            // 导航离开该组件的对应路由时被调用
        }
    }

Route jump navigation parsing process, when When routing from A ->B

1. Call the leave guard in the A component. beforeRouterLeave

2 in component A calls the global beforeEach guard. router.beforeEach

3. Then execute beforeEnter in route B configuration.

routes:[
      {
          path:'/b',
          component:B,
          beforeEnter:(to,form,next)=>{
             ..... 
          }
      }
  ]

4. Then execute the entry guard of component B. In component B, beforeRouterEnter

5 calls the global beforeResolve guard (2.5). router.beforeResolve

6. Navigation is confirmed.

7. Call the global afterEach hook. router.afterEach

8, trigger DOM update.

[Related recommendations: vuejs video tutorial, web front-end development]

The above is the detailed content of What are the navigation hooks of vue?. For more information, please follow other related articles on the PHP Chinese website!