Component inside ＜Transition＞ renders non-element root node that cannot be animated. 并出现空白页

目录

1.问题：

 2.原因及解决方案：

---

1.问题：

前端控制台出现vue警告，内容如下：

 [Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated.

前端画面如下：

出现空白画面，首次进入后可以显示画面内容，但是跳转到其他画面后，其他画面打不开，显示空白页，然后再跳转到之前能打开的画面也显示空白页。

 2.原因及解决方案：

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

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

底层代码：

<template>
  <router-view v-slot="{ Component, route }">
    <transition name="fade" mode="out-in" appear>
      <component
        :is="Component"
        v-if="route.meta.ignoreCache"
        :key="route.fullPath"
      />
      <keep-alive v-else :include="cacheList">
        <component :is="Component" :key="route.fullPath" />
      </keep-alive>
    </transition>
  </router-view>
</template>

错误原因在于在Vue 3中，<transition>组件要求其子节点必须是一个元素节点。由于在<router-view>组件中使用了v-slot来获取路由组件的引用，并在<component>中渲染该引用。

我的代码：

 在我的vue中，template中除了有一个div还有另一个组件，所以有两个节点，因为导致了vue报警出错。所以既然<transition>中不能有多个根元素，那么解决办法就是： 将我们的组件都包裹成单个根元素。

component里正确的template代码如下：

 就是确保在template下，只放一个div节点，其他内容全部放在这个div下，不要在template下放两个同层的div。

参照：

vue3警告：Component inside ＜Transition＞ renders non-element root node that cannot be animated-优快云博客