error.vue - Nuxt 目录结构 - Nuxt 中文文档 v4

Maschinelle Übersetzung ·0 % geprüft

在应用的生命周期中，某些错误可能会在运行时意外出现。在这种情况下，我们可以使用 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
  // veraltetes bzw. nicht mehr empfohlenes Äquivalent zu `status`
  statusCode: number
  // veraltetes bzw. nicht mehr empfohlenes Äquivalent zu `statusText`
  statusMessage?: string
}

在生产环境中于服务器端渲染错误页面时，它只会收到通过 createError 创建的错误中的 message 和 data。应用抛出的其他错误（例如 $fetch 请求失败）会被标记为 unhandled，并以其状态码和通用消息传递给错误页面及 payload。若要显示错误详情，请捕获该错误，并使用客户端可以看到的信息抛出 createError。

如果错误包含自定义字段，这些字段会丢失；你应该改为将它们赋值给 data：

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