Vue.js - 更新路由器视图 [英] Vue.js - update router view

问题描述

我是 Vue.js 的新手，遇到了这个问题.

我在 App.vue 中有这段简单的代码

<router-link v-bind:to="{name: 'brand', params: {brandId:brand.BrandId } }">{{品牌}}</路由器链接>
<路由器视图/>

router/index.js 路由数组项如下所示:

<代码>{路径: '/brand/:brandId',名牌'，组件:() =>导入('../views/BrandDetail.vue')}

我收到了来自 API 的响应.它是一个有效的对象数组.菜单显示正常.

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

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

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

有人可以向我解释这里发生了什么吗?

解决方案

当你进入一个你已经在的路线并且组件没有重新加载时会发生这种情况，即使参数不同.将您的 router-view 更改为:

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

I am new to Vue.js and encountered this problem.

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 />

The router/index.js routes array item looks like this:

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

I received the response from API. It is a valid array of objects. The menu is showing fine.

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?

解决方案

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 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屋！