Vue.js - 更新路由器视图

Posted

技术标签:

【中文标题】Vue.js - 更新路由器视图【英文标题】:Vue.js - update router view 【发布时间】:2020-05-20 06:52:00 【问题描述】:

我是 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),但不会更新路由器视图。

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

我还尝试向键添加响应式数据源,但没有帮助。

谁能给我解释一下这里发生了什么?

【问题讨论】:

【参考方案1】:

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

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

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

【讨论】:

【参考方案2】:

您需要包含props: true


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

【讨论】:

以上是关于Vue.js - 更新路由器视图的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js 路由器视图没有组件?

如何将数据传递给 Vue.js 中的路由器视图

与路由器视图组件vue js共享根数据

如何将 Vue.js 范围样式应用于通过视图路由器加载的组件?

vue.js路由

每次更新路由时调用一个函数 vue.js