vue-router does not destroy components when switching components
By default, when using vue-router to switch components, the left component will be destroyed and the newly entered component will be created.
Then, sometimes, we hope that the components we leave are not destroyed. At this time, you need to use the keep-alive tag to cache components.
1. Use keep-alive to wrap router-view
Wrap keep-alive outside router-view tag
Use v-if to judge, otherwise all components will be destroyed or not. The judgment condition comes from the meta field when the route is defined
<keep-alive> <router-view v-if="$"></router-view> </keep-alive> <router-view v-if="!$"></router-view>
2. Define the routing meta field
As follows, under the DAC_module path, there is a meta field and the keepAlive value is true, then the route of this path will not destroy the component during route switching.
And the ADC_module route will destroy the component during switching.
{ path:'/DAC_module', component:() => import(/* webpackChunkName: "DacModule" */ '../components/DacModule/'), meta:{ keepAlive: true} }, { path:'/ADC_module', component:() => import(/* webpackChunkName: "AdcModule" */ '../components/AdcModule/'), },
3. The principle of keep-alive
When created, put the vnode nodes that need to be cached into the cache, and when rendered, they are taken out according to the name.
vue-router routing switch pit dug by component reuse
Problem description
When vue-router navigation switch, if both routes render the same component, the component will be re-used, and the component's life cycle hook will not be called again, making some component's data unable to be updated according to the path changes
The overturning scene reappears
This is an excerpt from my /router/
export default new Router({ routes: [ { path: '/main', component: Main }, { path: '/get', component: Main } ] })
This is an excerpt from mine
<p>{{$}}</p>
The above scenario is obvious. I want to display the path value before and after the route jump
The route jumps from /main to /get . Ideally, the route displayed on the web page changes from /main to /get
But the fact is that the web page has not changed at all, the content displayed is still /main
Analysis of the cause of the car accident
Judging from my car condition, I used the exact same components before and after this routing jump. By carefully checking the corresponding location of the vue-router document, I found the following key content
When using routing parameters, such as navigating from /user/foo to /user/bar, the original component instance will be reused. Because both routes render the same component, reuse is more efficient than destroying and recreating. However, this also means that the component's lifecycle hook will no longer be called.
route object is immutable, and a new object will be generated after each successful navigation.
These two key information indicate that when normal components are not reused, the route objects in the component are corresponding to the latest route. However, when component reused, since the component's life cycle hook will not be called again, the route objects in the component are still the same and will not be updated, so the path information of the page appears. There is no change before and after the jump.
Go to rescue
The reason has been analyzed clearly, let’s start solving it. Fortunately, vue-router provides the solution API as follows
Use the beforeRouteUpdate guard introduced in 2.2:
const User = { template: '...', beforeRouteUpdate (to, from, next) { // react to route changes... // don't forget to call next() } }
The modified one is as follows
data () { return { path:this.$; } } beforeRouteUpdate (to, from, next) { path = this.$; }
As a result, the rescue site overturned again
The path on the page still remains unchanged
Analyze the reasons again, check the corresponding location of the vue-router document, and find the important content as follows
beforeRouteUpdate (to, from, next) { // Called when the current route changes but the component is reused // For example, for a path with dynamic parameters /foo/:id, when jumping between /foo/1 and /foo/2, // Since the same Foo component is rendered, component instances are reused. And this hook will be called in this case. // Component instances can be accessed `this` },
What is said above
/foo/:id, when jumping between /foo/1 and /foo/2,
Mine is adjusted from /main to /get, which does not meet the above situation and deserves to be overturned
A real rescue
data () { return { path:this.$; } } watch: { '$route' (to, from) { = this.$ } }
This time the rescue was really successful, and the path of the page changed from /main to /get
The above is personal experience. I hope you can give you a reference and I hope you can support me more.