如何在 Nuxt 3 (Vue 3) 应用程序中将 ~/layout/default.vue 应用于 ~/error.vue？

Question

我正在使用 Nuxt 3 和 Vue 3。我有一个默认布局的目录结构，我想将其应用于包括该error.vue页面在内的所有页面。

注意：该error.vue文件位于项目的根目录中。

我的目录结构如下：

project-application
  - /assets/
      - /styles/
          - errorStyles.scss
  - /components/
  - /composables/
  - /layouts/
      - default.vue
  - /pages/
      - index.vue
      - /course/
          - [id].vue
  - /public/
  - /server/
  - /utils/
  - /app.vue
  - /error.vue
  - /nuxt.config.ts
  - package.json
  - ...

目前，这些内容default.vue已应用于我的pages文件夹中的所有内容。

问题：如何将我的default.vue布局应用到我的布局 error.vue（位于项目根文件夹中）。

app.vue文件

project-application
  - /assets/
      - /styles/
          - errorStyles.scss
  - /components/
  - /composables/
  - /layouts/
      - default.vue
  - /pages/
      - index.vue
      - /course/
          - [id].vue
  - /public/
  - /server/
  - /utils/
  - /app.vue
  - /error.vue
  - /nuxt.config.ts
  - package.json
  - ...

error.vue文件

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

default.vue文件

<template>
  <div class="errorSection">
    <p>ERROR DETAILS: {{ error.statusCode }} {{ error.statusMessage }}</p>
  </div>
</template>

<script setup lang="ts">
defineProps({
  error: {
    type: Object,
    default: null,
  },
});
</script>

<style setup="scss" scoped>
@import "./assets/styles/errorStyles.scss";
</style>

Answer 1

我在文件中所要做的error.vue就是添加NuxtLayout并default.vue也应用于我的错误页面。

error.vue文件

<template>
  <NuxtLayout>
    <div class="errorSection">
      <p>ERROR DETAILS: {{ error.statusCode }} {{ error.statusMessage }}</p>
    </div>
  </NuxtLayout>
</template>