vue3警告：内部组件渲染了非元素根节点，该节点无法渲染。

两天内一直被一个bug折磨，终于发现了问题的所在。决定做一个小记录，以此加深记忆！

在vue项目中，当转到新加入的页面中时，控制台报出以下警告： Component inside renders non-element root node that cannot be animated.

并且跳转过去的页面无法正常加载：

这个warn是因为组件中包裹的不是一个单节点元素。我们是在 <router-view>中使用了<transition> 而<component>标签本身不会创建真实DOM元素 直接包裹在<transition>中的，就是我们自己写的组件，也就是传给<component>的is属性的Component。

出现问题的所对应的右侧内容组件代码是这样的： 从代码中可以看出，存在3个根节点，注意（template不代表根节点）。

这就是<transition>报错的原因。

vue3文档关于<transition>的介绍 <transition> serve as transition effects for single element/component. The <transition> only applies the transition behavior to the wrapped content inside;

<transition>只能用于单元素/组件之上。

所以既然<transition>中不能有多个根元素，那么解决办法就是： 将我们的组件都包裹成单个根元素。