It's a bit difficult to capture the exact issue in the title.
Here is the scenario:
// In the main layout page
<keep-alive>
<router-view />
</keep-alive>
// And I have a route
{ path: "something/:id", name: "something", component: () => import("something.vue") }
When I navigate to it:
this.$router.push({
name: "something",
params: { "id": 123, ... } // and more params
});
Everything seems normal up to this point.
However, if I push the same name again with a different parameter value (the id is now 456):
// something.vue
// The param shows the new value (456), which is fine
{{$route.params.id}}
// But the other data values from the previous route remain, for example:
{{ count }}
<q-btn label="add" @click="add" />
<script>
export default {
data() {
return {
count: 1
};
},
methods: {
add() {
this.count++;
}
}
};
</script>
Let me summarize the issue:
- Pushing id 123
- The parameter value is correct (123) and the count value is 1
- Click on "add" button, count value becomes 2
- Pushing id 456
- The parameter value is correct (456)
- !!! However, the count value remains at 2, which is not the intended behavior
I want the count value to be specific to each route, ensuring that the data state is independent across different routes.