[英]Vue.js - update router view
我是 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),但不會更新路由器視圖。
還有其他硬編碼的路由器鏈接。 如果我去那里並返回到任何動態添加的路由器鏈接,它會按預期工作,但是如果我單擊一個動態路由器鏈接,然后單擊另一個,則路由器視圖會卡在第一個中。
我還嘗試向密鑰添加反應數據源,但這沒有幫助。
有人可以向我解釋這里發生了什么嗎?
當您輸入已在的路線時會發生這種情況,並且即使參數不同,組件也不會重新加載。 將您的router-view
更改為:
<router-view :key="$route.fullPath" />
Vue 在可能的情況下嘗試重用組件,這不是您在這種情況下想要的。 key
屬性告訴 Vue 為每個唯一鍵使用不同的組件實例,而不是重用一個。 由於每組參數的路徑不同,這將是一個很好的密鑰。
你需要包含props: true
{
path: '/brand/:brandId',
props: true,
name: 'brand',
component: () => import('../views/BrandDetail.vue')
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.