项目场景：

提示：前端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里边