Vue.js - 更新路由器视图

Question

我是 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 的响应。 它是一个有效的对象数组。 菜单显示正常。

我希望路由器视图在单击路由器链接时更新。 它会更新 URL (#/brand/id)，但不会更新路由器视图。

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

我还尝试向密钥添加反应数据源，但这没有帮助。

有人可以向我解释这里发生了什么吗？

Answer 1

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

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

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

Answer 2

你需要包含props: true

{
    path: '/brand/:brandId',
    props: true,
    name: 'brand',
    component: () => import('../views/BrandDetail.vue')
}