Nuxt 3 提供了许多开箱即用的功能，其中包括默认的错误页面。不过，尽管默认错误页面很好用，通常我们更希望创建属于自己的自定义错误页面。
本文将详细讲解如何编写自定义错误页面，根据错误代码进行定制，并在发生错误时优雅地恢复应用的正常状态。
创建自定义错误页面
在 Nuxt 3 中，要创建一个错误页面，我们需要在项目根目录（与 app.vue 文件同级）添加一个 error.vue 文件。
首先我们来了解一下这个error.vue 页面，它不是一个普通的页面，在Nuxt项目中error.vue 文件有一定的特殊性：
-
错误页面独立于路由系统
- 在 Nuxt 中，普通页面是通过
pages目录定义的，它们会自动映射到 Vue Router 的路由规则中。 - 然而，
error.vue并不是通过路由系统加载的。它是 Nuxt 内部直接处理错误状态时显示的页面，而不是依赖 Vue Router 来显示。
- 在 Nuxt 中，普通页面是通过
-
并非所有 Nuxt 应用都使用 Vue Router
- 有些 Nuxt 应用可能没有页面（比如纯后端渲染的 API 或者某些微服务）。
- 在这种情况下，应用可能没有用到 Vue Router，但错误页面仍然需要被支持，因此
error.vue是 Nuxt 的内置机制，而不是通过 Vue Router 渲染的普通页面。
-
适用于服务端和客户端的错误
error.vue页面既可以用于处理服务端错误（例如服务器渲染失败），也可以用于客户端的运行时错误。- 这种设计保证了无论应用是否使用 Vue Router，都能有一个统一的错误处理页面。
接下来写一个简单的 error.vue 示例：
<template>
<NuxtLayout>
<div>
<h1>糟糕！</h1>
<p><strong>{{ error.message }}</strong></p>
<p>看起来发生了一些错误。</p>
<p>非常抱歉。</p>
</div>
</NuxtLayout>
</template>
<script setup>
// 可以通过 useError 获取错误的详细信息
const error = useError();
</script>
全局错误 vs 客户端错误
在 Nuxt3 中，错误可以分为两类：
-
全局错误（Global Errors）: 这些错误通常是“服务端错误”，但仍然可以通过客户端访问，例如 API 调用失败或服务端渲染出错时发生。
-
客户端错误（Client-side Errors）: 这些错误仅存在于客户端，与应用的其他部分无关。比如交互操作或路由切换时的错误。
注意：NuxtErrorBoundary 仅处理客户端错误。
全局错误需要使用其他方法单独处理。
清除错误并恢复
当应用发生错误时，我们需要一种机制来从错误中恢复。例如，可以通过 clearError 方法清除全局错误并导航到其他页面：
<script setup>
const error = useError();
const handleError = () => {
clearError({
redirect: '/home', // 清除错误并跳转到首页
});
};
</script>
<template>
<NuxtLayout>
<div class="prose">
<h1>糟糕！</h1>
<p><strong>{{ error.message }}</strong></p>
<p>看起来发生了一些错误。</p>
<p>非常抱歉。</p>
<p>
返回 <a @click="handleError">仪表盘</a>
</p>
</div>
</NuxtLayout>
</template>
当用户点击链接时，错误将被清除，并跳转到 /home。
自定义 404 页面
默认情况下，Nuxt 的错误页面只会显示传入的错误信息。如果我们希望针对 404 错误显示完全不同的页面，可以通过检查 error.statusCode 实现。
通过 useError 获取的错误对象包含以下结构：
error = {
statusCode: Number, // 错误代码
statusMessage: String, // 状态信息
message: String // 错误详情
}
接着我们根据状态在error.vue页面，加上404的判断，具体代码如下：
<template>
<NuxtLayout>
<div class="prose">
<template v-if="error.statusCode === 404">
<h1>404 页面不存在</h1>
<p>抱歉，您访问的页面不存在。</p>
</template>
<template v-else>
<h1>糟糕！</h1>
<p><strong>{{ error.message }}</strong></p>
<p>看起来发生了一些错误。</p>
<p>非常抱歉。</p>
</template>
<p>
返回 <a @click="handleError">回到首页</a>
</p>
</div>
</NuxtLayout>
</template>
<script setup>
const error = useError();
const handleError = () => {
clearError({
redirect: '/home',
});
};
</script>
总结
Nuxt 3 提供了灵活的错误处理机制，让我们可以： 创建自定义错误页面； 根据错误代码动态调整页面内容； 优雅地清除错误并帮助用户恢复到应用的正常状态。
更多信息可参考 Nuxt 官方文档 的错误处理https://nuxt.com.cn/docs/getting-started/error-handling部分。
评论(0)