Vue.js-更新路由器视图 [英] Vue.js - update router view
问题描述
我是Vue.js的新手,并且遇到了此问题.
I am new to Vue.js and encountered this problem.
我在App.vue中有一段简单的代码
I have this simple piece of code in 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路由数组项如下所示:
The router/index.js routes array item looks like this:
{
path: '/brand/:brandId',
name: 'brand',
component: () => import('../views/BrandDetail.vue')
}
我收到了API的回复.这是一个有效的对象数组.菜单显示正常.
I received the response from API. It is a valid array of objects. The menu is showing fine.
我希望路由器视图在单击路由器链接时会更新.它确实会更新URL(#/brand/id),但路由器视图不会更新.
I would expect the router view to update on the click of the router-link. It does update the URL (#/brand/id), but the router view does not update.
还有其他硬编码的路由器链接.如果我去那里并返回到任何动态添加的路由器链接,它将按预期工作,但是如果我单击一个动态路由器链接,然后单击另一个,则路由器视图将卡在第一个视图中.
There are other router-links that are hardcoded. If I go there and back to any dynamically added router-link it works as expected but if I click one dynamic router-link and then another the router-view is stuck in the first one.
我还尝试向该密钥添加一个反应性数据源,但这无济于事.
I also tried to add a reactive data source to the key but that did not help.
有人可以向我解释一下这是怎么回事吗?
Can someone explain to me what is going on here?
推荐答案
即使您输入的路径已经存在,并且即使参数不同,也不会重新加载组件,否则会发生这种情况.将您的router-view
更改为:
This happens when you enter a route you are already on, and the component is not reloaded, even though the parameters are different. Change your router-view
to:
<router-view :key="$route.fullPath" />
Vue在可能的情况下尝试重用组件,这在这种情况下不是您想要的. key
属性告诉Vue为每个唯一键使用组件的不同实例,而不是重用一个.由于每组参数的路径都不相同,因此这将是一个很好的关键.
Vue tries to reuse components when possible, which is not what you want in this situation. The key
attribute tells Vue to use a different instance of a component for each unique key rather than reusing one. Since the path is different for each set of parameters, that will make a good key.
这篇关于Vue.js-更新路由器视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!