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 的控制台警告提供了有用的提示：

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

日志指向<Index>（即index.vue），我们看到component there has two root nodes，Vue将其包装在一个片段节点中，导致“非-元素根节点”警告：

<template>
  <div> 1️⃣ <!-- root node -->
    <h1>Hello, World</h1>
    <p>It's Nuxt3!</p>
  </div>
  <NuxtLink to="/user">User</NuxtLink> 2️⃣ <!-- root node -->
</template>

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

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

// index.vue
<template>
  <div>  <!-- single root node -->
    <div>
      <h1>Hello, World</h1>
      <p>It's Nuxt3!</p>
    <div>
    <NuxtLink to="/user">User</NuxtLink>
  </div>
</template>

NuxtLink 正在更新 nuxt 3 应用程序中的路由，但未呈现内容

NuxtLink is updating route in nuxt 3 app, but not rendering contents

vue.js

nuxt.js

vuejs3

nuxtjs3