如何从useError中获取statusCode在Nuxt中的TypeScript

omvjsjqw 于 2023-05-01 发布在 TypeScript

关注(0)|答案(1)|浏览(85)

我使用以下代码（简化）在Nuxt项目中创建自定义错误页面：

<script setup lang="ts">
const props = defineProps({
  error: Error,
});

function onClearError() {
  clearError({ redirect: "/" });
}
</script>

<template>
// ...
{{ props.error }}
// ...
</template>

问题是，Nuxt传递的“error”属性只包含错误信息，如“Error：页面未找到/bookmarks/errr”。
我想做的是得到错误代码，也是。例如404、500等。
在useError（）的定义中：https://nuxt.com/docs/api/composables/use-error据说它返回statusCode，但我就是找不到如何得到它。

typescript

来源：https://stackoverflow.com/questions/76142010/how-to-get-statuscode-from-useerror-in-typescript-in-nuxt

1条答案

按热度按时间

utugiqy61#

您不需要在模板中调用prop。您可以直接调用error对象，如下所示。

<h1>{{ error.statusCode }}</h1>

显示错误消息

<div>{{ error.statusMessage }}</div>

确保在根目录中创建error.vue页。
~error.vue

<script lang="ts" setup>
defineProps({
  error: Object,
});
</script>
<template>
  <div>
    <div>
      <h1>{{ error.statusCode }}</h1>
    </div>
    <div>
      {{ error.statusMessage }}
    </div>
    <div>
      <button @click="clearError({ redirect: '/' })">Back to Home</button>
    </div>
  </div>
</template>

我为你创建了一个示例https://stackblitz.com/edit/nuxt-starter-bqwk4j?file=error.vue
第一个链接将呈现404未找到页面，因为应用程序上不存在about页面。而另一个，我手动抛出一个错误来呈现和错误的页面。希望这对你有帮助。
如果您想了解更多关于错误处理的信息，可以在这里找到nuxt示例https://nuxt.com/docs/examples/app/error-handling

赞(0）回复(0）举报 2023-05-01

我来回答

如何从useError中获取statusCode在Nuxt中的TypeScript

1条答案

相关问题

热门标签

最新问答