VUE3 开发遇到的问题

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

出现问题现象：
1、浏览器控制台报如上图所示的错误。
2、首次进入后可以显示画面内容，但是跳转到其他画面后，其他画面打不开，显示空白页，然后再跳转到之前能打开的画面也显示空白页。

问题原因：
由于项目中用到了vue3内置的<Transition> 组件，这个组件可以帮助你制作基于状态变化的过渡和动画。这个组件规定了：

<template> 仅支持单个元素或组件作为其插槽内容。如果内容是一个组件，这个组件必须仅有一个根元素。

由于vue3的template 里面可以有多个根元素。因此有多个根元素的组件在<template>里面就会报上面图片中的错误。

解决办法：
修改组件的template，使其只有一个根元素。

参考资料：

https://blog.csdn.net/m0_72167535/article/details/134814906