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>

有效

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

不起作用

现在，当我单击另一个项目时，我仍然在浏览器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文档，

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

Answer 2

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

VueJS使用参数推送路由在浏览器中显示旧参数

2 个答案: