Vue 轉換不適用於具有可重用組件的路由器視圖

Question

所以我創建了一個組件，我只在其中放置了router-view並根據組件更改的路由。 值得注意的是，這是第二個router-view ，第一個放置在App.vue組件中，並與該工作一起轉換工作（它們適用於所有路由，除了下面的組件包含的路由）

主組件.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>使用可重用組件的轉換是否需要特殊設置？

Answer 1

當你進入一個你已經在查看其組件的路由時，默認情況下該組件會被重用，因此不會觸發 DOM 轉換。 將您的router-view更改為：

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

key屬性告訴 Vue 在key發生變化時使用組件的不同實例（而不是重用現有的實例）。 使用$route.fullPath ，每次路線更改時都會如此。