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, and 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 looking at it carefullyvue-router documentationThe following key content was found in the corresponding location
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, checkvue-router document corresponding location, the important contents are found 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 article briefly talks about vue-router routing switching. The pit dug by component reuse is all the content I share with you. I hope you can give you a reference and I hope you can support me more.