在Nuxt 3应用程序中自定义错误页面未生效。

huangapple go评论58阅读模式
英文:

Custom error page in nuxt 3 application not working

问题

在我的使用 Nuxt 3 v# 3.6.0 的宠物项目中,我无法设置自定义错误页面。

在项目中,我有布局 (default.vue) 和页面 (index.vue) 文件夹。
无论我将 error.vue 文件放在哪里,系统都无法识别它。

在Nuxt 3应用程序中自定义错误页面未生效。

英文:

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.

在Nuxt 3应用程序中自定义错误页面未生效。

答案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
&lt;script setup&gt;
const props = defineProps({
  error: Object,
  required: true,
});

const handleError = () =&gt; clearError({ redirect: &#39;/&#39; });
&lt;/script&gt;

&lt;template&gt;
  &lt;div&gt;{{ error.statusCode }}&lt;/div&gt;
  &lt;div&gt;&lt;button @click=&quot;handleError&quot;&gt;Go to the home page&lt;/button&gt;&lt;/div&gt;
&lt;/template&gt;

See a working replication using nuxt@3.6.0.

huangapple
  • 本文由 发表于 2023年6月26日 07:08:10
  • 转载请务必保留本文链接:https://go.coder-hub.com/76552735.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定