两天内一直被一个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>中不能有多个根元素，那么解决办法就是：
将我们的组件都包裹成单个根元素。
