재사용 가능한 컴포넌트가 있는 라우터 뷰에서는 Vue 전환이 기능하지 않음

재사용 가능한 컴포넌트가 있는 라우터 뷰에서는 Vue 전환이 기능하지 않음

그래서 저는 컴포넌트를 만들었습니다.router-view컴포넌트가 변경되는 루트를 기반으로 합니다.주의할 점은 이것이 두 번째라는 것이다.router-view그리고 첫 번째 것은 RPM에 배치되어 있습니다.App.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>?

컴포넌트가 이미 표시되어 있는 루트를 입력하면 기본적으로 컴포넌트가 재사용되므로 DOM 전환이 트리거되지 않습니다.변경하다router-view대상:

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

그keyAtribute는 Vue에게 (기존 인스턴스를 재사용하는 대신) 언제든지 다른 컴포넌트 인스턴스를 사용하도록 지시합니다.key값이 변화합니다.와 함께$route.fullPath이 값은 루트가 변경될 때마다 발생합니다.

언급URL : https://stackoverflow.com/questions/60228718/vue-transitions-do-not-work-for-router-view-with-reusable-component