Detailed explanation of the difference between routing hooks in Vue2.x and Vue3.x

vue2.x

Pre-concept:

Routing hook categories

There are 3 categories and 7 hooks in total.

The concept of routing and components (for easy understanding of hook functions)

Routing and components are two concepts, which can be roughly considered as:

• The route is the browser URL
• Components are different types of content that appear on a web page.

Global routing hooks

router.beforeEach(to, from, next){ } Pre-navigation guard

Before routing

router.afterEach(to, from, next){ } Post navigation guard

After the route enters

router.beforeResolve(to, from, next){ } Resolution guard

When parsing a component, all configurations have been read, and all previous levels have passed. Execute before parsing the component

Routing configuration guard hook

beforeEnter() is called before reading the routing configuration information

Executed before beforeCreate()

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => { }
    }
  ]
})

Guard hooks in components

beforeRouteEnter(to, from, next){ } before entering the component

By default, you cannot get the component instance this

However, the following methods can be used to access

beforeRouteEnter(to, from, next){ 

  // The callback function of next() is instantiated and executed when entering the route next(vm => {
    // vm is equivalent to the current component this
  })
}

beforeRouteUpdate(to, from, next){ } before modifying the component

The current component is still using the routing address change and will only be executed if the above two conditions are met

beforeRouteLeave(to, from, next){ } Before leaving the component

Routing hook execution order

Eg: jump from component A to component B

beforeRouteLeave() leaves component A first

beforeEach() global - front navigation guard

beforeEnter() before reading routing configuration information (reading B routing information)

beforeRouteEnter() before entering the component

beforeResolve() resolution guard

afterEach() global - post navigation guard

If there is an update on route B, the following three hooks will be executed each time:

beforeEach() Global - Pre-navigation guard

beforeResolve() global - resolution guard

beforeRouteUpdate() in the component - before modifying the component

vue3.x

Vue3.x is only slightly different from vue2.x, so we will only explain the differences here.

Comparison chart

Differences and Supplements:

• In Vue2.x, there are 3 components. If component A jumps to component B, there are subcomponents in component B:
  

The subcomponents in component B will not trigger the routing hook

• In Vue3.x, there are 3 components. If component A jumps to component B, there are subcomponents in component B:
  

The subcomponents in component B trigger the routing hooks: onBeforeRouteUpdate and onBeforeRouteLeave
The subcomponents in component B will not trigger the routing hook

• In Vue3.x, there are 3 components. If component A jumps to component B, there are subcomponents in component B:
  

The subcomponents in component B trigger the routing hooks: onBeforeRouteUpdate and onBeforeRouteLeave

The above is the detailed explanation of the differences between routing hooks in Vue2.x and Vue3.x. For more information about the differences between routing hooks in Vue2.x and Vue3.x, please pay attention to other related articles on 123WORDPRESS.COM!