vue3警告：Component inside ＜Transition＞ renders non-element root node that cannot be animated

最近写后台管理系统，记录一下一个小bug.
当我跳转到新页面的时候会出现如下空白页的情况。

vue警告如下

<router-view v-slot="{ Component }">
	<transition name="fade-transform" mode="out-in">
		<keep-alive :include="tagsViewStore.cachedViews">
			<component :is="Component" :key="key" />
		</keep-alive>
	</transition>
</router-view>

在Vue2中，每个Vue组件只能有一个根节点，也就是说在template标签中只能包含一个根元素。如果有多个根元素，Vue2会报错。而在Vue3中，允许在template标签中包含多个根元素，所以我一开始的代码书写如下：

<template>
	<div class="filter-conainer">筛选</div>
	<div class="content-wrapper">内容</div>
</template>

错误原因在于在Vue 3中，<transition>组件要求其子节点必须是一个元素节点。由于在<router-view>组件中使用了v-slot来获取路由组件的引用，并在<component>中渲染该引用，而我的component代码中有两个节点，因为导致了vue报警出错。所以既然<transition>中不能有多个根元素，那么解决办法就是： 将我们的组件都包裹成单个根元素。

component里正确的template代码如下：

<template>
	<div class="app-container">
		<div class="filter-conainer">筛选</div>
		<div class="content-wrapper">内容</div>
	</div>
</template>

在<div class="filter-conainer">与<div class="content-wrapper">外层包裹一层div使template中只保留一个根元素。