我是Vue.js的新手,遇到了此问题。

我在App.vue中有这段简单的代码

<div v-for="brand in response" v-bind:key="brand.BrandId">
    <router-link v-bind:to="{name: 'brand', params: {brandId: brand.BrandId } }">
        {{brand.Name}}
    </router-link>
</div>
<router-view />

router / index.js路由数组项如下所示:
{
    path: '/brand/:brandId',
    name: 'brand',
    component: () => import('../views/BrandDetail.vue')
}

我收到了API的回复。这是一个有效的对象数组。菜单显示良好。

我希望路由器 View 在单击路由器链接时会更新。它的确会更新URL(#/ brand / id),但路由器 View 不会更新。

还有其他硬编码的路由器链接。如果我去那里并返回到任何动态添加的路由器链接,它将按预期工作,但是如果我单击一个动态路由器链接,然后单击另一个,则路由器 View 将停留在第一个 View 中。

我还尝试将响应数据源添加到密钥,但这没有帮助。

有人可以告诉我这是怎么回事吗?

最佳答案

当您输入已经在的路线时,即使参数不同,也会发生这种情况,并且不会重新加载组件。将您的router-view更改为:

<router-view :key="$route.fullPath" />

Vue尝试尽可能重用组件,这在这种情况下不是您想要的。 key属性告诉Vue为每个唯一键使用组件的不同实例,而不是重用一个。由于每组参数的路径都不相同,因此这将是一个很好的关键。

10-05 20:43
查看更多