Vue. js - обновить вид роутера - PullRequest
Новая
       4

Vue. js - обновить вид роутера

2 голосов
/ 04 февраля 2020

Я новичок в Vue. js и столкнулся с этой проблемой.

У меня есть этот простой кусок кода в приложении. 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 />

Маршрутизатор / index. js Элемент массива маршрутов выглядит так: 

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

Я получил ответ от API. Это допустимый массив объектов. Меню отображается нормально.

Я ожидаю, что представление маршрутизатора обновится при нажатии ссылки маршрутизатора. Он обновляет URL-адрес (# / brand / id), но представление маршрутизатора не обновляется.

Существуют другие ссылки на маршрутизаторы, которые жестко закодированы. Если я go возвращаюсь к любой динамически добавляемой ссылке на маршрутизатор, она работает, как и ожидалось, но если я щелкаю одну динамическую c ссылку на маршрутизатор, а затем другую, то представление маршрутизатора застревает в первой.

Я также пытался добавить реактивный источник данных к ключу, но это не помогло.

Может кто-нибудь объяснить мне, что здесь происходит?

Ответы [ 2 ]

4 голосов
/ 04 февраля 2020

Это происходит, когда вы вводите маршрут, на котором вы уже находитесь, и компонент не перезагружается, даже если параметры отличаются. Измените router-view на: 

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

Vue пытается повторно использовать компоненты, когда это возможно, что не является тем, что вам нужно в этой ситуации. Атрибут key указывает Vue использовать отдельный экземпляр компонента для каждого уникального ключа, а не использовать его повторно. Поскольку путь различен для каждого набора параметров, это станет хорошим ключом.

0 голосов
/ 04 февраля 2020

Вам необходимо включить props: true

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