Component inside <Transition> renders non-element root node that cannot be a

报错

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

原因：

下方代码导致的报错

js 复制代码

      <transition name="fade-transform" mode="out-in">
         <keep-alive :include="tagsViewStore.cachedViews">
           <component v-if="!route.meta.link" :is="Component" :key="route.path"/>
         </keep-alive>
      </transition>

在 Vue.js 中，当你使用 <transition> 组件来包裹另一个组件时，<transition> 组件期望其直接子组件渲染一个单一的根元素。这是因为 <transition> 组件需要能够明确地捕捉和管理这个根元素的进入（enter）和离开（leave）过渡效果。

然而，当你将 <keep-alive> 组件作为 <transition> 的直接子组件时，并且 <keep-alive> 内部又包含了 <component> 动态组件，可能会出现问题。特别是，如果 <component> 根据不同的 is 属性值渲染出不同的组件，而这些组件的根元素不是统一的（比如，一个组件渲染了一个 div，而另一个渲染了一个 span），那么 <transition> 组件就会难以处理这种不一致性。

此外，如果 <keep-alive> 缓存的组件在其内部有条件地渲染了不同的元素（即不是始终渲染一个稳定的根元素），这同样会导致 <transition> 组件出现问题。

警告信息 "Component inside renders non-element root node that cannot be animated or controlled via CSS transitions" 通常意味着 <transition> 组件无法确定如何为它的直接子组件（在这个情况下是 <keep-alive>，但实际上是 <keep-alive> 内部的 <component> 渲染的内容）应用 CSS 过渡效果

解决办法

1.在外层包裹一个div确保**<transition-group>下只有一个根元素

2.使用<transition-group> ：如果你的组件确实需要渲染多个根元素（虽然这通常不是 <transition> 的用例），你可以考虑使用 <transition-group>。但是，请注意 <transition-group> 要求其直接子元素有一个共同的父元素，并且这些子元素必须有唯一的 key 属性。

3.检查 <keep-alive> 的使用：确保 <keep-alive> 的使用是恰当的，并且它包裹的组件在渲染时不会改变其根元素。

注：

<keep-alive>组件会创建并缓存真实的 DOM 元素，而<component>组件则根据当前渲染的组件来决定是否创建真实的 DOM 元素