解决 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>

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

warn]: Component inside Transition renders non-element root node that cannot be animated.
因为比较简单先说解决方法: 用一个 div 把过渡到的代码(组件代码) 包起来即可详情: 用到 transition: (提升用户体验组件动画) 警告信息: 过渡的组件代码: 解决:(用d ...
vue 页面跳转路由不显示内容Component inside ＜Transition＞ renders non-element root node that cannot be animated.
显示信息: Component inside <Transition> renders non-element root node that cannot be animated. 原因: ...
vue3 出现 Component inside ＜Transition＞ renders non-element root node that cannot be animated.
项目使用vite脚手架+vue3,在根组件App.vue当中使用了页面过渡动画首页index.vue 代码结果控制台出现 Component inside <Transition> ...
vite、vue3警告：Component inside ＜Transition＞ renders non-element root node that cannot be animated.
一.问题代码 <template><section><router-view v-slot="{ Component }"><transi ...
vue3 Component inside ＜Transition＞ renders non-element root node that cannot be animated.
这是<Transition>中的组件渲染无法设置动画的非元素根节点. <router-view v-slot="{ Component }"><tra ...
vue Component inside ＜Transition＞ renders non-element root node that cannot be animated.
警告:没有用根节点,无法使用动画在router-view上使用div标签包住, <div><router-view v-slot="{ Component }" ...
成功解决Component template should contain exactly one root element
前言报错信息: VUE小白会碰到这样的错误,刚上手,对vue还不太熟悉,所以对里面的构造方式不太清楚. 对于这个bug,我们很容易翻译为: 组件模板应该只包含一个根元素查看代码如图所示,temp ...
quasar使用keep alive警告 Component inside ＜Transition＞ renders non-element root node
问题描述提示:这里描述具体问题:在项目中使用缓存来保持页面不被更新,但是在使用keep-alive时会给出警告.vue3缓存与vue2缓存不一样,需要注意.下面是代码. <router-vie ...
vue3警告： [Vue warn]: Component inside renders non-element root node that cannot be animat
导致原因由于Vue3对于模板的改进,可以让<template>不需要唯一跟标签包裹,所有可能很多开发同学也按照这个优雅的约定编写Dom. 就像这样: <!-- Landing.vu ...

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

问题现象

问题原因

解决方法

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

最新文章

热门文章