Lzh 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="/">Go back home</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: 'Page Not Found',
  data: {
    myCustomField: true
  }
})