v3.16
Nuxt on GitHub

error.vue

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

在应用运行过程中，可能会出现一些意料之外的运行时错误。此时，我们可以使用 error.vue 文件覆盖默认的错误页面，并优雅地展示错误信息。

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

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

<template>
  <div>
    <h1>{{ error.statusCode }}</h1>
    <NuxtLink to="/">返回首页</NuxtLink>
  </div>
</template>
尽管它被称为“错误页面”，但它并不是一个路由页面，因此不应该放置在 ~/pages 目录下。出于同样的原因，也不应在此页面中使用 definePageMeta。
不过你仍然可以在错误页面中使用布局组件 NuxtLayout，并指定要使用的布局名称。

错误页面接收一个名为 error 的 prop，用于处理错误信息。

该 error 对象包含以下字段：

{
  statusCode: number
  fatal: boolean
  unhandled: boolean
  statusMessage?: string
  data?: unknown
  cause?: unknown
}

如果你抛出的错误包含自定义字段，这些字段将不会被保留；你应该将它们放入 data 字段中，例如：

throw createError({
  statusCode: 404,
  statusMessage: '页面未找到',
  data: {
    myCustomField: true
  }
})