Nuxt 3 default.vue 布局以错误的顺序加载组件

Question

我拉了一个工作正常的项目，我将我的 npm 工具更改为yarn，删除了node_modules，用yarn安装并用yarn dev运行，突然间我遇到了这个奇怪的错误，其中元素的顺序在我的app.vue 都是错误的。

发生的情况是组件显示在组件下方，并且组件显示在最后

这是我的app.vue。

<template>
  <section>
    <LayoutHeader />
    <NuxtPage /> /* <---- this component is shown last */
    <LayoutFooter />
  </section>
</template>

• 仅当我使用导航到页面时才会发生这种情况，刷新后看起来很好。
• 这不是CSS问题，位置是正确的，没有绝对定位的元素，当检查html时，很明显HTML内部的顺序是错误的。

有谁知道这种行为的原因是什么？

Answer 1

这可能与您的

app.vue

文件中渲染组件的顺序有关。使用 Nuxt.js 时，必须包含

<NuxtLayout>

标签以确保正确渲染。以下是修改

app.vue

文件的方法：

<template>
  <NuxtLayout>
    <section>
      <LayoutHeader />
      <NuxtPage /> <!-- This component should now be rendered correctly -->
      <LayoutFooter />
    </section>
  </NuxtLayout>
</template>