如何路由来自同一个组件的多个实例，并在vue中保持其自身状态

Question

我可能无法在标题中非常准确地描述这个问题。

前提：

// in main layout page
<keep-alive>
<router-view />
</keep-alive>
// and i have a route
{ path: "something/:id", name: "something", component: () => import("something.vue") }

然后我导航到

this.$router.push({
name: "something",
params: { "id": 123, ... } // and more params
});

到目前为止，一切都很正常。

但是，当我用其他params值(id为456(再次推送相同的名称时：

// something.vue
// the param is new value (456), no problem
{{$route.params.id}}
// but the other data value is kept previous route, like:
{{ count }}
<q-btn label="add" @click="add" />
<script>
export default {
data() {
return {
count: 1
};
},
methods: {
add() {
this.count++;
}
}
};
</script>

让我重新整理一下。

1. 推送id 123
2. param值正确(123(，计数值为1
3. 点击"；添加"；按钮，计数值为2
4. 推送id 456
5. param值正确(456(
6. ！！！计数值为2！！！这不是我想要的

我希望计数值遵循路由路径，这意味着不同路由中的所有数据状态都是独立的

Answer 1

当您导航到相同的路由但使用不同的参数时-Vue重用组件实例，而不首先销毁然后重新创建它。您应该使用beforeRouteUpdate钩子来捕获它-或者在$route上放置一个观察程序(然后检查新路由是否仍然是同一名称(。

更多信息请参阅手册-https://next.router.vuejs.org/guide/advanced/navigation-guards.html#in-部件防护

Answer 2

实际上，我放弃了我的想法。

现在我尝试使用组件元素来解决

<keep-alive :include="views">
<component :is="view" />
</keep-alive>