在开发一个vue3项目时，发现有些页面在点击过去时，页面组件无法正常加载，控制台也有很多警告， 如：

Component inside ＜Transition＞ renders non-element root node that cannot be animated.

二、 问题分析

中的组件不能呈现动画的非元素根节点。 也就是说，Transition包裹的必须是一个单根的组件。虽然在vue3中，组件可以不设置根节点，但是如果被路由的页面被包裹添加过渡动画，则必须

三、问题解决

将非单根节点变为单根节点即可。 要么在页面加div包裹住组件，要么改一下的结构：

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