Vue.js -更新路由器视图

uurv41yg  于 2023-06-24  发布在  Vue.js
关注(0)|答案(2)|浏览(161)

我是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 routes数组项看起来像这样:

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

我收到了API的回复。它是一个有效的对象数组。菜单显示正常。
我希望路由器视图在点击路由器链接时更新。它会更新URL(#/brand/id),但路由器视图不会更新。
还有其他路由器链路是硬编码的。如果我去那里,并返回到任何动态添加的路由器链接,它的工作如预期,但如果我点击一个动态路由器链接,然后另一个路由器视图是停留在第一个。
我还尝试向密钥添加一个React式数据源,但没有帮助。
有人能解释一下这是怎么回事吗?

oyjwcjzk

oyjwcjzk1#

当您输入已位于的管线时,即使参数不同,构件也不会重新加载时,就会发生这种情况。将router-view更改为:

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

Vue在可能的情况下尝试重用组件,这不是在这种情况下你想要的。key属性告诉Vue为每个唯一键使用组件的不同示例,而不是重用一个。由于fullPath对于每一组参数都是不同的,因此这将产生唯一的密钥。

sauutmhj

sauutmhj2#

您需要包含props: true

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

相关问题