如何在 NuxtJS 3 中实现自定义错误页面？答案

【问题标题】：How do I implement custom error pages in NuxtJS 3?如何在 NuxtJS 3 中实现自定义错误页面？
【发布时间】：2022-06-11 02:54:04
【问题描述】：

我正在尝试让我的 NuxtJS 3 应用程序显示自定义错误页面。该应用程序与 SSR 通用。 NuxtJS 2 文档说要添加一个layouts/error.vue 文件，它应该被拾取。但是，在使用 NuxtJS 3 时，我的自定义页面永远不会显示 - 无论是通过硬重新加载还是通过路由器导航到带有 <NuxtLink> 的断开链接。

是否更改了 NuxtJS 3 中的自定义错误页面？ docs https://v3.nuxtjs.org/docs/directory-structure/layouts

中似乎没有任何关于它们的文档

【问题讨论】：

也许看看这个：github.com/nuxt/framework/discussions/559
谢谢@kissu，看来自定义错误页面仍在进行中。在撰写本文时，NuxtJS 3 仍处于测试阶段。
没错。有些东西仍然需要维护者/社区解决！

标签： javascript vue.js nuxt.js server-side-rendering nuxtjs3

【解决方案1】：

如果你在根目录而不是 layouts 文件夹中添加错误页面，它可以工作！

【讨论】：

【解决方案2】：

https://v3.nuxtjs.org/guide/features/error-handling/#example

您可以通过在源代码中添加 ~/error.vue 来自定义此错误页面应用程序的目录，以及 app.vue。这个页面有一个单个 prop - 包含您要处理的错误的错误。

./error.vue（与 app.vue 一起）

<template>
  <button @click="handleError">Clear errors</button>
</template>

<script setup>
const props = defineProps({
  error: Object
})

const handleError = () => clearError({ redirect: '/' })
</script>

【讨论】：