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

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

前提是：

// in main layout page
<keep-alive>
  <router-view />
</keep-alive>

// and i have a route
{ path: "something/:id", name: "something", component: () => import("something.vue") }

到目前为止，一切正常

但是，当我使用其他参数值（id为456）再次推送相同的名称时：

//something.vue
//参数是新值（456），没有问题
{{$route.params.id}
//但另一个数据值保留在前一个路由中，如：
{{count}}
导出默认值{
数据（）{
返回{
计数：1
};
},
方法：{
添加（）{
这个.count++；
}
}
};

让我重新安排一下

推送id 123

参数值正确（123），计数值为1

点击“添加”按钮，计数值为2

推码456

参数值正确（456）

！！！计数值为2！！！这不是我想要的

---

我想让计数值跟随route path，这意味着当您导航到相同的路由但使用不同的参数时，不同路由中的所有数据状态都是独立的-Vue重用组件实例，而无需先销毁然后重新创建它。您应该使用

beforeRouteUpdate

钩子捕获此消息，或者在

$route

上放置一个观察者（然后检查新路由是否仍然是相同的名称）

---

更多信息在手册中-

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

现在我尝试使用组件元素来解决这个问题

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

---

组件实例是每个路由的。您可以在路由更新时重置状态。我遇到一个新问题：

// 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>

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