问题

项目使用vite2+vue3，在App.vue当中使用了页面过渡动画Transition, 控制台出现警告信息

runtime-core.esm-bundler.js:38 [Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated. 
  at <Admin onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key= {fullPath: "/", path: "/", query: {…}, hash: "", name: "index", …} > 
  at <BaseTransition appear=false persisted=false mode=undefined  ... > 
  at <Transition name="slide" > 
  at <RouterView> 
  at <App>

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

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

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

我的index.vue

  <template>
  	<div>index</div>
  	<router-view></router-view>
</template>

改为：

<template>
	<div>
  		<div>index</div>
  		<router-view></router-view>
    </div>
</template>

只需要在外面套一层div即可。