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

今天在用Arco的组件库的时候遇到一个问题：在route路由中引入一个页面页面中有多个根节点此时切换页面会出现白屏的情况，控制台会出现这个警告这个只是一个页面切换时候的动画过渡组件，大不了干掉它文件所在路径......

空门.

16159人浏览 · 2022-07-06 01:25:57

空门. · 2022-07-06 01:25:57 发布

问题现象

今天在用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>