this is my Route, An and B common component Common.
let routes = [
{
path: "/A",
name: "A",
component: Common,
},
{
path: "/B",
name: "B",
component: Common,
}
];Common component is as follows. After I clicked on the button several times, the jump to B _ # doesn"t work, and it shows the changed number value. How to avoid caching to allow Common components to re-render?
<template>
<div>
<button @click="click"> Click Me!</button>
<br>
The value of number is: {{number}}
<br>
<button @click="next">Click Me to navigate to next route!</button>
</div>
</template>
<script>
// @ is an alias to /src
import _ from "lodash";
export default {
name: "Common",
data: function() {
return {
number: 1
}
},
methods: {
click: function() {
this.numberPP;
},
next: function() {
this.$router.push({path: "B"});
}
},
mounted: function() {
console.log("enter mounted");
},
destroyed: function() {
console.log("destroyed");
}
}
</script>
Update:
I found that I can add the following method to the Common component, so that when you jump from A to B, the data in B is the original data, but there is still a problem, transition still does not work, how to solve it.
beforeRouteLeave: function(to, from, next) {
console.log("beforeRouteLeave");
Object.assign(this.$data, {number: 1});
next();
}