如何为Nuxt.js错误页面应用默认布局并保留路由过渡效果

这里提供两种可行的方案，帮你解决错误页面布局与过渡冲突的问题：

方案一：提取布局核心组件复用 #

把默认布局里的页眉、页脚等通用内容抽成独立组件（比如components/LayoutCore.vue）：

• 在原默认布局文件（layouts/default.vue）中引入这个组件，保持pages目录下的页面正常使用原有布局逻辑。
• 在error.vue里直接引入LayoutCore.vue，用它包裹错误页面的内容。这样既复用了布局样式，又不会触发嵌套的<NuxtLayout>，避免过渡效果被破坏。

示例代码：
components/LayoutCore.vue

<template>
  <header>这里是页眉</header>
  <slot /> <!-- 留插槽给页面内容 -->
  <footer>这里是页脚</footer>
</template>

layouts/default.vue

<template>
  <LayoutCore>
    <slot />
  </LayoutCore>
</template>

error.vue

<template>
  <LayoutCore>
    <div class="error-content">
      <h1>{{ error.statusCode }}</h1>
      <p>{{ error.message }}</p>
    </div>
  </LayoutCore>
</template>

方案二：通过路由判断控制布局嵌套 #

调整app.vue的结构，根据当前路由是否为错误页面来决定是否包裹<NuxtLayout>：

1. 在app.vue中通过useRoute()判断路由名称，错误页面的路由名默认是error。
2. 非错误页面继续用<NuxtLayout>包裹<NuxtPage>，错误页面直接渲染<NuxtPage>，然后在error.vue中自行添加<NuxtLayout>，这样就不会出现嵌套布局冲突。

示例代码：
app.vue

<script setup>
const route = useRoute()
</script>

<template>
  <template v-if="route.name !== 'error'">
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </template>
  <template v-else>
    <NuxtPage />
  </template>
</template>

error.vue

<template>
  <NuxtLayout>
    <div class="error-page">
      <h1>{{ error.statusCode }}</h1>
      <p>{{ error.message }}</p>
    </div>
  </NuxtLayout>
</template>

这两种方案都能让错误页面应用默认布局，同时保留你在nuxt.config.ts中配置的过渡效果。

内容的提问来源于stack exchange，提问作者Michael