英文:
Custom error page in nuxt 3 application not working
问题
在我的使用 Nuxt 3 v# 3.6.0 的宠物项目中，我无法设置自定义错误页面。
在项目中，我有布局 (default.vue) 和页面 (index.vue) 文件夹。
无论我将 error.vue 文件放在哪里，系统都无法识别它。
英文:
In my pet project with Nuxt 3 v# 3.6.0 I can't set up custom error page.
In project, I have layouts (with default.vue) and pages (with index.vue) folders.
Wherever I put the error.vue file, the system won't recognize it.
答案1
得分: 2
根据Nuxt 3的文档，自定义错误页面应该是根目录下名为error.vue的文件，该文件接收一个错误对象属性，以及app.vue页面。
也许你的项目问题是缺少了app.vue页面。
一个简单错误页面的代码可能如下：
- error.vue
<script setup>
const props = defineProps({
error: Object,
required: true,
});
const handleError = () => clearError({ redirect: '/' });
</script>
<template>
<div>{{ error.statusCode }}</div>
<div><button @click="handleError">返回主页</button></div>
</template>
可以查看使用nuxt@3.6.0的示例。
英文:
Accordingly to the documentation of Nuxt 3, the custom error page is supposed to be a file named error.vue in the root directory that receives an error object property, alogside app.vue page.
Maybe the problem of your project is that the app.vue page is missing.
The code of a simple error page could be:
- error.vue
<script setup>
const props = defineProps({
error: Object,
required: true,
});
const handleError = () => clearError({ redirect: '/' });
</script>
<template>
<div>{{ error.statusCode }}</div>
<div><button @click="handleError">Go to the home page</button></div>
</template>
See a working replication using nuxt@3.6.0.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论