Nuxt3中间件动态添加路由：首次加载404问题及最优方案咨询

针对你遇到的「首次直接访问自定义产品路由返回404，二次导航正常」问题，核心原因是客户端路由中间件在服务器端渲染阶段未执行，导致服务器无法识别该路由。以下是几种符合Nuxt3设计逻辑的最优解决办法：

方案一：页面级异步验证（推荐） #

创建动态匹配页面pages/[slug].vue，利用Nuxt3的definePageMeta验证机制，在服务器端就完成路由合法性校验：

<template>
  <div v-if="product">
    <h1>{{ product.title }}</h1>
    <p>{{ product.description }}</p>
  </div>
  <div v-else>
    <h1>404 产品不存在</h1>
  </div>
</template>

<script setup>
const route = useRoute()

// 路由合法性验证（服务器端优先执行）
definePageMeta({
  validate: async (route) => {
    // 校验路径格式是否匹配/my-product-xxx
    if (!route.params.slug.match(/^my-product-\d+$/)) return false
    // 提取产品ID并查询数据库
    const productId = route.params.slug.split('-')[2]
    const product = await $fetch(`/api/products/${productId}`)
    return !!product
  }
})

// 获取产品数据
const productId = route.params.slug.split('-')[2]
const product = await $fetch(`/api/products/${productId}`)

// 若验证通过但数据获取失败，手动抛出404
if (!product) throw createError({ statusCode: 404, statusMessage: 'Product Not Found' })
</script>

方案二：服务器端中间件路由重写 #

通过服务器端中间件拦截请求，直接将合法的产品路径重定向到固定产品页面，同时传递参数：

// server/middleware/product-router.ts
export default defineEventHandler(async (event) => {
  const rawPath = event.node.req.url?.split('?')[0] || ''
  // 匹配/my-product-xxx格式的路径
  const slugMatch = rawPath.match(/^\/my-product-(\d+)$/)
  
  if (slugMatch) {
    const productId = slugMatch[1]
    // 查询数据库验证产品存在性
    const product = await $fetch(`/api/products/${productId}`)
    
    if (product) {
      // 重写请求路径到产品页面，携带ID参数
      event.node.req.url = `/product?id=${productId}`
      // 可选：将产品数据注入上下文，避免页面重复查询
      event.context.product = product
    }
  }
})

对应的pages/product.vue页面：

<template>
  <div v-if="product">产品详情：{{ product.title }}</div>
</template>

<script setup>
const route = useRoute()
// 从URL参数获取ID查询，或从服务器上下文直接取注入的数据
const product = await $fetch(`/api/products/${route.query.id}`)
// const { product } = useRequestEvent().context
</script>

方案三：自定义路由规则 #

在app/router.options.ts中直接注册动态路由规则，让Vue Router提前识别路径：

// app/router.options.ts
import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig>{
  routes: (existingRoutes) => [
    ...existingRoutes,
    {
      path: '/my-product-:id(\\d+)', // 仅匹配数字ID的产品路径
      component: () => import('~/pages/product.vue'),
      props: (route) => ({ id: route.params.id })
    }
  ]
}

pages/product.vue页面处理数据：

<template>
  <div v-if="product">{{ product.title }}</div>
  <div v-else>404</div>
</template>

<script setup>
const props = defineProps<{ id: string }>()
const product = await $fetch(`/api/products/${props.id}`)

if (!product) throw createError({ statusCode: 404 })
</script>

问题根源说明 #

你之前的方案依赖客户端路由中间件添加路由，但首次直接访问是服务器端渲染（SSR），客户端中间件尚未执行，服务器无法识别该路由，因此返回404；二次导航是客户端路由跳转，中间件已执行，路由已注册，所以能正常显示。上述方案均在服务器端完成路由校验或注册，从根源解决了首次访问的404问题。

内容的提问来源于stack exchange，提问作者Matej