Vue переходы не работают для просмотра маршрутизатора с повторно используемым компонентом - PullRequest
Новая
       13

Vue переходы не работают для просмотра маршрутизатора с повторно используемым компонентом

1 голос
/ 14 февраля 2020

Итак, я создал компонент, в который я поместил только router-view и в зависимости от маршрутов компонент изменился. Стоит отметить, что это второй router-view, и первый помещается в компонент App.vue, и переход работает с этой работой (они работают для всех маршрутов, кроме тех, которые содержатся в компоненте ниже)

MainComponent. vue

<template>
<transition name="fade" mode="out-in">
     <router-view></router-view>
</transition>
</template>


<style>
.fade-enter-active, .fade-leave-active {
  transition-property: opacity;
  transition-duration: .25s;
}

.fade-enter-active {
  transition-delay: .25s;
}

.fade-enter, .fade-leave-active {
  opacity: 0
}
</style>

Вот настройка маршрута. 

{
    path: '/main',
    name: 'main',
    component: () => import('../views/MainComponent.vue'),
    children: [
      {

        path: 'first',
        name: 'first',
        props: { titleName: "First",},
        component: () => import('../components/Component.vue')
      },
      {

        path: 'second',
        name: 'second',
        props: { titleName: "Second"},
        component: () => import('../components/Component.vue')
      },
      {

        path: 'third',
        name: 'third',
        props: { titleName: "Third"},
        component: () => import('../components/Component.vue')
      }
   ]
  }

Существует ли специальная настройка, необходимая для переходов для работы с повторно используемым компонентом в <router-view>

1 Ответ

1 голос
/ 14 февраля 2020

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

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

Атрибут key указывает Vue использовать другой экземпляр компонента (вместо повторного использования существующего) каждый раз, когда изменяется значение key. С $route.fullPath это будет каждый раз, когда меняется маршрут.

...