给router-view内嵌transition动画，导致路由切换时白屏（不加载）问题

1. 原始状态时，我的组件之间的切换是正常的。

  <router-view></router-view>

2. 之后我想为其添加动画，但是我将其改为如下形式后，问题便出现了。 

      当我切换到某个组件后再切换回首页，首页的组件就不渲染了（白屏）。

  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <component :is="Component"></component>
    </transition>
  </router-view>

3. 问题排查：

        ① 是否报错。                                                              -否

        ② 路由跳转是否正常。                                                -是

        ③ router-view对应的组件是否包装成单个元素。         -是

4. 解决办法：把component包装再div中，并再div上添加key。

  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <div :key="$route.fullPath">
        <component :is="Component"></component>
      </div>
    </transition>
  </router-view>

5. 解决办法原帖：

vue.js - Vue 3 – renders non-element root node that cannot be animated - Stack Overflowhttps://stackoverflow.com/questions/65553121/vue-3-transition-renders-non-element-root-node-that-cannot-be-animated/70042452#70042452