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

一、问题代码

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

 

二、 问题分析

<Transition>中的组件不能呈现动画的非元素根节点。 也就是说，Transition包裹的必须是一个单根的组件。

三、问题解决

将非单根节点变为单根节点即可

<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>