VueJS用params推送路线在浏览器中显示旧的参数

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>

什么有效

现在在目标视图中，参数始终具有正确的值。当我第一次单击链接时，我在浏览器中看到了正确的快捷键。

不工作

现在，当我点击另一个项目时，我仍然在浏览器中看到首先在浏览器中单击的项目的键。即使在代码中，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中为每个元素添加一个唯一键，如下所示 -

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

按照vue js docs，

为Vue提供一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有元素，您需要为每个项目提供唯一的键属性。

Answer 2

您可以尝试在路径中添加“/”：path: '/details/:key'