Vue过渡不适用于具有可重用组件的路由器视图

因此，我创建了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>？