Nuxt App [Vue warn]:Component inside <Transition> renders non-element root node that cannot be animated答案

【问题标题】：Nuxt App [Vue warn]:Component inside <Transition> renders non-element root node that cannot be animatedNuxt App [Vue warn]:Component inside <Transition> renders non-element root node that cannot be animated
【发布时间】：2022-11-16 07:43:42
【问题描述】：

我正在使用 Nuxt 3 开发一个项目，但我一直在控制台中收到此警告

[Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated. 
  at <Default > 
  at <AsyncComponentWrapper > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>

我还没有过渡，但我认为它来自 nuxt spinner。

layouts/default.vue:

<template>
  <TheHeader />
  <slot />
</template>

我检查了我所有的页面和组件，它们都只有以下根元素（header、nav、div、form、NuxtLink、button、img）

该警告未指定它的来源，我不知道如何调试它。

【问题讨论】：

标签： vue.js nuxt.js nuxtjs3

【解决方案1】：

在 nuxt 3 中，一切都应该只有 1 个根元素：

<template>
   <div>
      <TheHeader />
      <slot />
   </div>
</template>

如果您卡在某些地方，请阅读文档：https://v3.nuxtjs.org/guide/directory-structure/layouts

【讨论】：

谢谢，我知道这一点，但实际上并没有注意到它，因为我认为问题出在组件或页面中。
@bill.gates — 我真的不会说“一切”，因为文档句子的字面意思是……“与其他组件不同”。在很多情况下，我们的团队不希望也不使用单根组件。不涉及任何转换的组件可以有多个根。无需包装不必要的额外标签。

【解决方案2】：

如果转换不在您的代码中，我会忽略警告。正如警告所述，它只会导致该特定组件的动画无效。我不会花任何时间调试它，因为您的代码不会受到影响。

编辑：如果你真的想调试这个，最简单的方法是使用 Vue 开发工具来搜索转换。

【讨论】：

我是初学者，但我认为您不能忽略任何警告。它可能会在以后导致比第一个警告更难解决的重大问题，你会像我处理这个问题一样学到一些新东西，并对你的编码更有信心。正如我所说，过渡来自 nuxt，我认为 vue devtools 不会有太大帮助，但感谢您的帮助。
别担心，投反对票很好，因为它不是您提到的真正的解决方案。我尊重你的观点，这是处理问题的好方法。然而，你会在生活中遇到这样一个时刻：研究你范围之外的问题是浪费时间……对于学习来说，这肯定是一件好事！干杯!