Component inside ＜Transition＞ renders non-element root node that cannot be animated. 并出现空白页

目录

1.问题：

 2.原因及解决方案：

---

1.问题：

前端控制台出现vue警告，内容如下：

 [Vue warn]: Component inside renders non-element root node that cannot be animated.

前端画面如下：

出现空白画面，首次进入后可以显示画面内容，但是跳转到其他画面后，其他画面打不开，显示空白页，然后再跳转到之前能打开的画面也显示空白页。

 2.原因及解决方案：

在Vue2中，每个Vue组件只能有一个根节点，也就是说在template标签中只能包含一个根元素。如果有多个根元素，Vue2会报错。而在Vue3中，允许在template标签中包含多个根元素，如下：

底层代码：

错误原因在于在Vue 3中，组件要求其子节点必须是一个元素节点。由于在组件中使用了v-slot来获取路由组件的引用，并在中渲染该引用。

我的代码：

 在我的vue中，template中除了有一个div还有另一个组件，所以有两个节点，因为导致了vue报警出错。所以既然中不能有多个根元素，那么解决办法就是： 将我们的组件都包裹成单个根元素。

component里正确的template代码如下：

 就是确保在template下，只放一个div节点，其他内容全部放在这个div下，不要在template下放两个同层的div。

参照：

vue3警告：Component inside ＜Transition＞ renders non-element root node that cannot be animated-CSDN博客