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

This article is to share with you about the difference between Vue2.x and Vue3.x routing hooks. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article. Without saying much, follow the editor to have a look.

Vue2.x pre-concept: routing hook classification

There are three categories, seven hooks.

Concepts of routing and components (easy to understand hook functions)

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

The route is the browser URL

Components are different contents displayed on a web page

Global routing hook

Router.beforeEach (to, from, next) {} Front Navigation Guard

Before routing enters

Router.afterEach (to, from, next) {} rear navigation guard

After the route is entered

Router.beforeResolve (to, from, next) {} parsing guard

When parsing the component, all the configurations have been read, the previous levels have been passed, and you are ready to execute before parsing the component.

Routing configuration Guard Hook

BeforeEnter () is called before reading routing configuration information

Execute before beforeCreate ()

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

Before beforeRouteEnter (to, from, next) {} enters the component

Component instance this cannot be obtained by default

But the following methods can be accessed

The callback function of beforeRouteEnter (to, from, next) {/ / next (), which instantiates next after entering the route (vm = > {/ / vm is equivalent to the current component this})}

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

The current component is still using routing address changes to meet the above two conditions before it is executed

BeforeRouteLeave (to, from, next) {} before leaving the component

Routing hook execution order eg: jump from A component to B component order

BeforeRouteLeave () leaves component A first.

BeforeEach () Global-Front Navigation Guard

Before beforeEnter () reads routing configuration information (reads B routing information)

Before beforeRouteEnter () enters the component

BeforeResolve () parsing guard

AfterEach () Global-rear navigation guard

If there is an update on Road B, the following three hooks are executed each time:

BeforeEach () Global-Front Navigation Guard

BeforeResolve () Global-parsing Guard

Within the beforeRouteUpdate () component-before modifying the component

Vue3.x

There are only a few differences between vue3.x and vue2.x. Here we will only explain the differences.

Contrastive change diagram

Differentiate and add:

In Vue2.x, there are three components, and if component A jumps to component B, there are subcomponents in component B:

Subcomponents in component B do not trigger routing hooks

In Vue3.x, there are three components, and if component A jumps to component B, there are subcomponents in component B:

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

Subcomponents in component B do not trigger routing hooks

In Vue3.x, there are three components, and if component A jumps to component B, there are subcomponents in component B:

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

These are the differences between routing hooks in Vue2.x and Vue3.x. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

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.