vue3+vuetify报错：Component inside ＜Transition＞ renders non-element root node that cannot be animated.

已于 2023-10-12 14:10:15 修改
阅读量293 收藏
点赞数
文章标签： vue.js 前端
于 2023-10-09 16:29:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dxy1128/article/details/133707017
版权

解决方法：在报错的页面中，template下应该只有一个根节点，用一个div元素将template中的多个根元素包裹起来，则可以解决这个报错。

EileenDeng
关注
Vue3 - 解决报错警告 ＜router-view＞ can no longer be used directly inside ＜transition＞ or ＜keep-alive＞.Use s
王佳斌
07-30 1805
vue3，警告，报错，vite，router，路由，router-view，销毁，transition，过渡动画，keep-alive，缓存，问题，在vue3项目中，浏览器控制台警告，
Vue - ＜transition＞ can only be used on a single element. Use ＜transition-group＞ for lists. 解决方案
王佳斌
07-13 8525
Vue - can only be used on a single element. Use for lists. 解决方案在 项目中，使用内置组件 收到了以下控制台报错： 看看是否存在包裹多个节点的问题，如下代码所示： 以上代码就会报错，因为 组件内部 嵌套的节点只能有一个，不能有多个。将以上代码改为：...
vue3 出现 Component inside ＜Transition＞ renders non-element root node that cannot be animated.
m0_52222401的博客
05-26 296
项目使用vite脚手架+vue3，在根组件main.vue当中使用了页面过渡动画。中的组件渲染无法设置动画的非元素根节点。加上根节点div就欧克了。运行项目控制台出现错误。
Component inside ＜Transition＞ renders non-element root node that cannot be animated. 并出现空白页
m0_72167535的博客
12-05 6169
在我的vue中，template中除了有一个div还有另一个组件，所以有两个节点，因为导致了vue报警出错。中，每个Vue组件只能有一个根节点，也就是说在template标签中只能包含一个根元素。出现空白画面，首次进入后可以显示画面内容，但是跳转到其他画面后，其他画面打不开，显示空白页，然后再跳转到之前能打开的画面也显示空白页。就是确保在template下，只放一个div节点，其他内容全部放在这个div下，不要在template下放两个同层的div。错误原因在于在Vue 3中，
[Vue warn]: Component inside ＜Transition＞ renders non-element root node that cannot be animated.
最新发布
weixin_45074627的博客
10-16 225
中的组件不能呈现动画的非元素根节点。也就是说，Transition包裹的必须是一个单根的组件。将非单根节点变为单根节点即可。
Component inside ＜Transition＞ renders non-element root node that cannot be animated. 动态组件切换的时候卡住
cchhllll的博客
04-17 227
动态组件切换的时候卡住，显示空白。组件要求其子节点必须是一个元素节点。
解决报错-Component inside ＜Transition＞ renders non-element root node that cannot be animated.
royal_cf的博客
05-06 437
最后发现，是因为template的根节点没有，所以解决方案就是在最外层包一个div即可。内部的组件<Transition>渲染无法进行动画处理的非元素根节点。今天遇到一个报错，如上图，翻译过来是这样的。
vue3组件过渡报错：Component inside ＜Transition＞ renders non-element root node that cannot be animated.
Ttowx的博客
10-20 629
vue 报错
【Vue3】解决 Component inside `＜Transition＞` renders non-element root node that cannot be animated. 的问题
小秀的博客
09-16 5132
renders non-element root node that cannot be animated. 组件呈现不能被动画化的非元素根结点。我们在 layout 整体布局下，为各个局部页面添加了动画显示页面的功能，但结果却是不能显示该动画效果。中，类似于 Vue2 那样），问题得以解决~内部所有元素放入一个根节点。
vue Component inside ＜Transition＞ renders non-element root node that cannot be animated.
前端的路上
04-08 1036
警告：没有用根节点，无法使用动画 在router-view上 使用div标签包住， <div> <router-view v-slot="{ Component }"> <!-- keep-alive 缓存 --> <keep-alive include="addTemp,simpleTemp"> <component :is="Component" /> </keep-...
vue 页面跳转路由 不显示内容Component inside ＜Transition＞ renders non-element root node that cannot be animated.
limonero
12-17 1900
显示信息： Component inside <Transition> renders non-element root node that cannot be animated. 原因： warn是因为组件中包裹的不是一个单节点元素。 <template> <a-layout-content class="vab-content"> <router-view v-slot="{ Component }...
解决 Component inside ＜Transition＞ renders non-element root node that cannot be animated 问题
热门推荐
A_KID的博客
07-06 1万+
今天在用Arco的组件库的时候遇到一个问题： 在route路由中引入一个页面 页面中有多个根节点 此时切换页面会出现白屏的情况，控制台会出现这个警告 这个只是一个页面切换时候的动画过渡组件，大不了干掉它 文件所在路径......
vite、vue3警告：Component inside ＜Transition＞ renders non-element root node that cannot be animated.
大香蕉的博客
04-12 1896
一、问题代码 <template> <section> <router-view v-slot="{ Component }"> <transition name="fade" mode="out-in"> <component :is="Component" :key="$route.path" /> </transition> </router-view>
Vue3 - 解决打包报错SyntaxError:At least one ＜template＞ or ＜script＞ is required in a single file component.
王佳斌
09-10 2926
vue3，报错，打包，build，提示错误，vite，vue3打包，vue报错，error during build: SyntaxError: At least one ＜template＞ or ＜script＞ is required in a single file component.，详细解决方案，如何快速定位空文件，项目中存在空的文件导致的，都检查了没问题，找不到空白文件，如何找到缺少template的vue文件，不显示错误文件怎么排查，不知道报错的地方在哪，vue3启动报错，如何解决这个问题
vue3警告： [Vue warn]: Component inside renders non-element root node that cannot be animat
qq_45909266的博客
04-26 551
愿所有工程师不因AI的逐渐强大而焦虑，要坚信，能替代我们的，只有我们自己的惰性和停滞不前~~
vue3 Component inside ＜Transition＞ renders non-element root node that cannot be animated.
WLiuNi的博客
03-07 213
vue3模板中等于使用了vue3的特性 <transition>节点内不能有两个节点，<transition> 加上<div> 包裹住
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值