NuxtLink 正在更新 nuxt 3 应用程序中的路线，但不渲染内容

Question

我正在尝试在 Nuxt 3 应用程序中使用 NuxtLink 来使用路线，它正在更改路线，但它没有显示任何内容。但是，如果我刷新或重新加载之前为空白的更新路线，那么它会正常显示其内容。

/pages/index.vue

<template>
  <div>
    <h1>It's Nuxt3!</h1>
    <p>Home Page</p>
  </div>
  <NuxtLink to="/user">User</NuxtLink>
</template>

/pages/user.vue

<template>
  <div>
    <h1>It's Nuxt3!</h1>
    <p>User Page</p>
  </div>
</template>

文件夹结构和插图：

Answer 1

Vue 的控制台警告提供了有用的提示：

\n

[Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated. \n  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< VueInstance > key="/" > \n  at <BaseTransition mode="out-in" appear=false persisted=false  ... > \n  at <Transition name="page" mode="out-in" > \n  at <NuxtLayout key=0 name=undefined > \n  at <RouterView> \n  at <NuxtPage> \n  at <App> \n  at <NuxtRoot>\n

\n

日志指向<Index>(即index.vue)，我们看到那里的组件有两个根节点，Vue 将其包装在一个片段节点中，从而导致“非元素根节点”警告：

\n

[Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated. \n  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< VueInstance > key="/" > \n  at <BaseTransition mode="out-in" appear=false persisted=false  ... > \n  at <Transition name="page" mode="out-in" > \n  at <NuxtLayout key=0 name=undefined > \n  at <RouterView> \n  at <NuxtPage> \n  at <App> \n  at <NuxtRoot>\n

\n

从技术上讲，这应该在 Nuxt 3 中得到支持，它使用 Vue 3，支持多个根节点，但我不确定为什么在这种情况下不允许这样做。

\n

解决方法是使用单个元素包装组件的模板，例如div：

\n

<template>\n  <div> 1\xef\xb8\x8f\xe2\x83\xa3 <!-- root node -->\n    <h1>Hello, World</h1>\n    <p>It\'s Nuxt3!</p>\n  </div>\n  <NuxtLink to="/user">User</NuxtLink> 2\xef\xb8\x8f\xe2\x83\xa3 <!-- root node -->\n</template>\n

\n