Nuxt中tools动态路由无匹配数据时如何展示自定义404页面组件

以下两种方案都可以实现保留当前URL、展示404内容的需求，你可以根据自己的使用场景选择： #

方案一：使用Nuxt内置错误处理（推荐，适配SSR、SEO更友好） #

这种方式和Nuxt框架约定对齐，触发404时会自动返回404 HTTP状态码，所有404场景的逻辑和样式可以统一管理：

1. 将你现有的pages/page-not-found.vue移动到Nuxt约定的布局路径layouts/error.vue，之后所有404场景都会自动渲染这个文件的内容。你也可以直接删除原来在nuxt.config.js中router.extendRoutes里手动配置的404路由规则，Nuxt会自动处理不存在的路径。
2. 在pages/tools/_id.vue中对应数据请求的钩子中判断数据是否存在，不存在时触发框架的错误处理即可：

Nuxt2写法 #

export default {
  async asyncData({ params, error }) {
    // 替换为你的实际数据请求逻辑
    const res = await fetch(`/your-api-path/tools/${params.id}`)
    const toolData = await res.json()
    if (!toolData) {
      // 调用error方法后，Nuxt会保留当前URL，自动渲染error.vue的内容
      error({ statusCode: 404, message: '工具不存在' })
      return
    }
    return { toolData }
  }
}

Nuxt3写法 #

<script setup>
const route = useRoute()
// 替换为你的实际数据请求逻辑
const { data: toolData } = await useAsyncData(() => $fetch(`/your-api-path/tools/${route.params.id}`))
if (!toolData.value) {
  // 抛出错误后，Nuxt会保留当前URL，自动渲染根目录下error.vue的内容
  throw createError({ statusCode: 404, statusMessage: '工具不存在' })
}
</script>

方案二：页面内条件渲染404组件（无需改动现有配置） #

如果你不想调整现有文件结构和路由配置，可以直接在_id.vue内引入404组件做条件渲染，效果完全一致：

<template>
  <div>
    <!-- 存在数据时渲染详情页内容 -->
    <div v-if="toolData">
      <!-- 你的详情页原有代码 -->
      <h1>{{ toolData.title }}</h1>
    </div>
    <!-- 不存在数据时直接渲染404组件 -->
    <PageNotFound v-else />
  </div>
</template>
<script>
// 引入你现有的404组件
import PageNotFound from '~/pages/page-not-found.vue'
export default {
  components: { PageNotFound },
  async asyncData({ params }) {
    // 替换为你的实际数据请求逻辑
    const res = await fetch(`/your-api-path/tools/${params.id}`)
    const toolData = await res.json()
    return { toolData: toolData || null }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Michel Gisenaël