v3.16
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 组件和指定布局的名称，在错误文件中使用布局。

错误页面有一个单一的 prop - error，它包含一个错误供您处理。

error 对象提供以下字段：

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

如果您有一个包含自定义字段的错误，这些字段将会丢失；您应该将它们赋值给 data：

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