Javascript Vue.js-更新路由器视图

Javascript Vue.js-更新路由器视图,javascript,vue.js,vuejs2,vue-router,Javascript,Vue.js,Vuejs2,Vue Router,我是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>

我是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 />
我收到了API的回复。它是一个有效的对象数组。菜单上显示的很好

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

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

我还尝试向密钥添加一个反应式数据源,但没有帮助


有人能解释一下这里发生了什么吗?

你需要包括
道具:true

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

当您输入一条已在其上的管线时,即使参数不同,也不会重新加载零部件,此时会发生这种情况。将
路由器视图更改为:

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

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

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