transition标签中引用mode=“out-in“之后切换页面显示空白

项目场景：

提示：前端vue项目路由切换之后页面空白：

例如：项目场景：在使用transation之后，路由切换有动画，但是使用mode=“out-in” 之后，页面切换之后变空白了。

问题描述

例如：在使用transation之后，路由切换有动画，但是使用mode=“out-in” 之后，页面切换之后变空白了。

<router-view v-slot="{ Component }">
  <Transition name="child" mode="out-in" appear >
    <component :is="Component" :key="route.path" />
  </Transition>
</router-view>

原因分析：

提示：因为路由切换的时候要组件为一个唯一的组件：

例如：我在写的时候，一个template下边有多个div，所以就造成了路由切换之后，不能动态的使用动画。

解决方案：

答案：把template下边的多个div套在一个div里边