本文详解如何在 Nuxt 3 中通过文件系统路由机制实现动态路由（如 /info/:id），并结合 useRoute() 和 useFetch() 在页面中按 ID 动态请求 API 数据。

本文详解如何在 nuxt 3 中通过文件系统路由机制实现动态路由（如 `/info/:id`），并结合 `useroute()` 和 `usefetch()` 在页面中按 id 动态请求 api 数据。

在 Nuxt 3 中，动态路由无需手动配置，而是通过约定式文件命名自动实现。只需在 pages/ 目录下创建带参数占位符的文件路径，Nuxt 即可识别为动态路由。

✅ 正确创建动态路由文件

在项目根目录的 pages/ 文件夹中，新建文件：

pages/info/[id].vue

该路径会自动映射到 localhost:3000/info/:id（例如 localhost:3000/info/123）。方括号 [id] 表示这是一个动态段，其值将作为路由参数 id 可被访问。

✅ 在页面中获取参数并请求数据

在 [id].vue 中，使用 useRoute() 获取当前路由参数，并通过 useFetch() 发起服务端或客户端数据请求：

在SEO发布前，从路由清单生成XML网站地图和robots.txt

当代理已经知道网站路由或内容URL，并且在启动前需要有效的sitemap XML、sitemap索引或robots.txt引用时，请使用sitemap。这是一个发布构件技能，而不是爬虫或SEO平台。

下载

<script setup>
const route = useRoute()
const { data: info, pending, error } = await useFetch(`/api/info/${route.params.id}`)
</script><template><div v-if="pending">
    加载中...
  </div>
  <div v-else-if="error">
    <p>获取信息失败：{{ error.data?.message || '未知错误' }}</p>
  </div>
  <div v-else>
    <h1>{{ info?.title || '详情页' }}</h1>
    <p>{{ info?.content }}</p>
  </div>
</template>

? 注意：route.params.id 类型为 string（即使 ID 是数字），如需数值运算请显式转换：parseInt(route.params.id)。

⚠️ 关键注意事项

• 文件名必须严格匹配：[id].vue 中的 id 需与 route.params.id 的键名一致；若使用 [slug].vue，则应读取 route.params.slug。
• 服务端渲染兼容性：useFetch 默认在服务端预取数据，确保 /api/info/:id 接口支持 SSR 请求（避免依赖浏览器专属 API）。
• 404 处理建议：可在 useFetch 的 onError 回调中调用 throw createError({ statusCode: 404 }) 触发 Nuxt 内置 404 页面。
• 多级动态参数：如 /user/[userId]/post/[postId]，对应 route.params.userId 和 route.params.postId。

通过以上方式，你无需配置路由表，即可优雅实现基于 ID 的动态页面渲染，并无缝集成 Nuxt 的数据获取与响应式能力。