nuxt中slug中如何正确抛出404错误

由 admin在 2025年8月11日2025年8月11日发表发表回复

const { data } = useAsyncData(() => 'xxx’ : route.params.slug || ''),
    async () => {
        const { slug } = route.params
        const slugArray = (typeof slug === 'string' ? slug.split('/') : slug).filter((item: string) => item !== '')
        const res: any = await post(`${useRuntimeConfig().public.apiBase}api/v1/xxx`,
            {
                body: { slug: slugArray }
            }
        )
        if (res.info === null) {
            showError({
                statusCode: 404,
                statusMessage: "Page Error",
                fatal: false,
            })
        }
        return res
    }
)

以上为以前的代码，通过使用useAsyncData中post请求url，把路径信息post到后端，来判断页面是否存在，有则显示，没有则返回404，主要通过res.info来判断，null则为404页面。
之前印象里可以用的，然而今天手贱更新了一堆东西，加上还升级了一堆包，当无意间打开了某个不存在的地址时，页面正常显示，某些变量的位置显示underfined，却没有正常抛出404。
然后将showError部分换成了createError去测试如下

if (res.info === null) {
  throw createError({
    statusCode: 404,
    message: "页面未找到"
  })
}

问题依旧，正常返回httpstatuscode:200，继续测试，直接在外部进行判断

const { data } = useAsyncData(/* ... */)

if (data.value?.info === null) {
  throw createError({ statusCode: 404 })
}

确实可以返回404了，但是页面很明显延迟了下，后面才变成错误页面的，控制台中网络请求中看到的依然是httpstatuscode是200

const { data } = await useAsyncData(/* ... */)

if (data.value?.info === null) {
  throw createError({ statusCode: 404 })
}

最后在useAsyncData前加await，终于报404错误了，控制台中看到的也一切正常。虽然不知道还有没有更靠谱的解决方案，也不知道合不合理，但是问题解决了，记录一下

发表回复取消回复