javascript - VueJS 推送带有参数的路由在浏览器中显示旧参数

Question

场景

我有一个应用程序，我使用 vue.js 2.6 和 vue-router 3.0

在那里我有这样的详细信息页面的链接

<div v-for="item in items">
    <router-link  :to="{name: 'details', params: {key: item.shortKey}}">
</div>

什么有效

现在在目标 View 中参数总是有正确的值此外，当我第一次单击链接时，我会在浏览器中看到正确的快捷键。

不工作

现在，当我单击另一个项目时，我仍然会在浏览器 url 中看到在浏览器中首先单击的项目的键。尽管在代码中，route.params 确实具有正确的值。

View 浏览器工具和代码本身都有正确的值。我错过了什么？

同样使用 router.push 也有同样的结果。从 history 更改为 hash 模式也不会改变行为

简化的路由器配置

const routes = new Router({
  mode: 'history',
  routes: [{
    component: layout,
    path: '/',
    children: [
      {
        path: '/',
        name: 'home',
        component: Home,
        meta:{display:"home"}
      },
      {
        path:'list',
        name:'list',
        component: listItemsComponent,
      },

      {
        path: 'details/:key',
        name: 'details',
        component: detailComponent
      },
    ]
  }]
});

Answer 1

尝试为 v-for 中的每个元素添加唯一键，如下所示 -

<div v-for="item in items" :key="item.id">
    <router-link  :to="{name: 'details', params: {key: item.shortKey}}">
</div>

根据 vue js 文档，

To give Vue a hint so that it can track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item.