解决 Component inside ＜Transition＞ renders non-element root node that cannot be animated 问题

问题现象

今天在用Arco的组件库的时候遇到一个问题：
在route路由中引入一个页面

component: () => import('@/views/demands/demand-list/index.vue')

页面中有多个根节点

<template>
   <div>1</div>
   <div>2</div>
</template>

此时切换页面会出现白屏的情况，控制台会出现这个警告

问题原因

Transition中的组件不能呈现动画的非元素根节点。 也就是说，Transition包裹的必须是一个单根的组件。
所以我们在切换页面的时候渲染就会出错了

解决方法

1.将组件额外包一层

<template>
  <div>
	 <div>1</div>
	 <div>2</div>
   </div>
</template>

2.将Arco脚手架夹中路由切换时候用到的transition组件删掉

这个只是一个页面切换时候的动画过渡组件，大不了干掉它
文件所在路径 src\layout\page-layout.vue

<template>
  <router-view v-slot="{ Component, route }">
    <!-- <transition name="fade" mode="out-in" appear> -->
    <component
      :is="Component"
      v-if="route.meta.ignoreCache"
      :key="route.fullPath"
    />
    <keep-alive v-else :include="cacheList">
      <component :is="Component" :key="route.fullPath" />
    </keep-alive>
    <!-- </transition> -->
  </router-view>
</template>

这篇好文章是转载于：学新通技术网