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

原创已于 2022-07-07 00:34:56 修改 · 1.6w 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2022-07-06 01:25:57 首次发布

不常见错误专栏收录该内容

4 篇文章

订阅专栏

使用Arco组件库时，在route路由中引入多根节点页面，切换页面会白屏且控制台有警告。原因是Transition包裹的须是单根组件，渲染出错。解决方法一是将组件额外包一层，二是删掉Arco脚手架中路由切换时用到的动画过渡组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题现象

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