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

This article will explain in detail how to solve the hole dug by component reuse during vue-router routing switching. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Problem description: when vue-router navigation is switched, if both routes render the same component, the component will be chong, and the lifecycle hook of the component will no longer be called, so that some data of the component cannot be updated according to the change of path.

The scene of the rollover is reproduced:

This is an excerpt from my / router/index.js

Export default new Router ({routes: [{path:'/ main', component: Main}, {path:'/ get', component: Main}]})

This is an excerpt from my Main.vue.

{{$router.currentRoute.path}}

The above scenario is obvious. I want to display the path values before and after route hopping.

The route jumped from / main to / get, ideally the route displayed in the web page changed from / main to / get

But the fact is that the web page has not changed a bit, and the content displayed is still / main

Analysis of the causes of traffic accidents

Judging from the condition of my car, I used exactly the same components before and after the route jump. By carefully looking at the corresponding location of the vue-router document, I found the following key contents

When routing parameters are used, such as navigating from / user/foo to / user/bar, the original component instance is reused. Because both routes render the same component, reuse is more efficient than destroying and re-creating. However, this also means that the component's lifecycle hooks will no longer be called.

Route object is immutable (immutable), and every successful navigation produces a new object.

These two key messages show that when the normal component is not reused, the route object in the component corresponds to the latest route, but when the component is reused, the route object in the component is still original and will not be updated because the component's lifecycle hook will no longer be called, so the path information of the page remains unchanged before and after jumping.

Go to the rescue

The reason is clear. Let's start to solve it. Fortunately, the api provided by vue-router is as follows.

Use the beforeRouteUpdate guards introduced in 2.2:

Const User = {template: '...', beforeRouteUpdate (to, from, next) {/ / react to route changes... / / don't forget to call next ()}}

The modified Main.vue is as follows

Data () {return {path:this.$router.currentRoute.path;}} beforeRouteUpdate (to, from, next) {path = this.$router.currentRoute.path;}

As a result, the rescue scene turned over again.

The path on the page remains unchanged

Analyze the reason again, look at the corresponding location of the vue-router document, and find that the important contents are as follows

BeforeRouteUpdate (to, from, next) {/ / the current route changes, but the component is called / / for example, for a path / foo/:id with dynamic parameters, when jumping between / foo/1 and / foo/2, / / the component instance will be reused because the same Foo component is rendered. And this hook will be called in this case. / / access to component instance `this`}

What it says is

/ foo/:id, when jumping between / foo/1 and / foo/2

Mine is transferred from / main to / get, which does not meet the above situation and deserves to be turned over.

A real rescue.

Data () {return {path:this.$router.currentRoute.path;}} watch: {'$route' (to, from) {this.path = this.$router.currentRoute.path}}

This time the rescue was really successful, and the path of the page changed from / main to / get.

This is the end of the article on "how to solve the hole dug by component reuse during vue-router routing switching". 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, please 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.