error.vue

error.vue 文件是 Nuxt 应用中的错误页面。

在应用程序的生命周期中，运行时可能会意外出现一些错误。在这种情况下，我们可以使用 error.vue 文件来覆盖默认的错误页面，并以友好的方式展示错误信息。

error.vue
<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps<{ error: NuxtError }>()
</script>

<template>
  <div>
    <h1>{{ error.status }}</h1>
    <NuxtLink to="/">Go back home</NuxtLink>
  </div>
</template>
尽管它被称为“错误页面”，但它并不是一个路由，因此不应放置在 ~/pages 目录下。同样的原因，你不应在此页面中使用 definePageMeta。话虽如此，你仍然可以通过使用 NuxtLayout 组件并指定布局名称，在错误文件中使用布局。

错误页面只有一个 prop —— error，其中包含了你需要处理的错误信息。

error 对象提供了以下字段

interface NuxtError {
  status: number
  fatal: boolean
  unhandled: boolean
  statusText?: string
  data?: unknown
  cause?: unknown
  // legacy/deprecated equivalent of `status`
  statusCode: number
  // legacy/deprecated equivalent of `statusText`
  statusMessage?: string
}

如果你有包含自定义字段的错误，这些字段将会丢失；你应该将它们分配给 data 属性。

throw createError({
  status: 404,
  statusText: 'Page Not Found',
  data: {
    myCustomField: true,
  },
})