vue3 出现 Component inside ＜Transition＞ renders non-element root node that cannot be animated.

项目使用vite脚手架+vue3，在根组件App.vue当中使用了页面过渡动画

首页index.vue 代码

结果控制台出现

  Component inside <Transition> renders non-element root node that cannot be animated. 这句话的意思是：

<Transition>中的组件渲染无法设置动画的非元素根节点。

针对这个问题解决方法是在index.vue 当中使用一个<div>标签，将index.vue所有标签包裹起来即可消除这个错误：

参考文章：

vue.js - Vue 3 – <Transition> renders non-element root node that cannot be animated - Stack Overflow