页面错误
一个预构建的错误组件，支持 NuxtError。
用法
404
页面未找到
您要查找的页面不存在。
<template>
<UPageError
:status="404"
name="Page not found"
message="The page you are looking for does not exist."
/>
</template>
您通常会在 error.vue 文件中使用此组件
error.vue
<template>
<div>
<UHeader />
<UContainer>
<UMain>
<UPage>
<UPageError :error="error" />
</UPage>
</UMain>
</UContainer>
</div>
</template>
<script setup lang="ts">
import type { NuxtError } from '#app'
defineProps<{
error: NuxtError
}>()
</script>
您可能想要复制
app.vue 文件中的代码到您的 error.vue 文件中，以拥有相同的布局和功能，以下是一个示例：https://github.com/nuxt/ui/blob/dev/docs/error.vue您可以在 Nuxt 文档 中了解更多关于如何处理错误的信息，但在使用 nuxt generate 时，建议在 createError 调用中添加 fatal: true，以确保显示错误页面
pages/[...slug].vue
<script setup lang="ts">
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
if (!page.value) {
throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}
</script>
道具
错误
Partial<NuxtError<unknown>>
未定义ui
DeepPartial<{ wrapper: string; status: string; name: string; message: string; links: string; default: { clearButton: { label: string; color: "primary"; size: "lg"; }; }; }>
{}名称
字符串
"发生错误"消息
字符串
"这不是您要查找的页面。"状态
数字
404清除按钮
按钮 & { click?: (...args: any[]) => void; }
{}配置
{
wrapper: 'min-h-[calc(100vh-var(--header-height))] flex flex-col items-center justify-center',
status: 'text-base font-semibold text-primary',
name: 'text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl',
message: 'mt-6 text-base/7 text-gray-500 dark:text-gray-400 text-center',
links: 'mt-10 flex items-center justify-center gap-x-6',
default: {
clearButton: {
label: 'Go back home',
color: 'primary',
size: 'lg'
}
}
}