本文详解如何在 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 可被访问。
在SEO发布前，从路由清单生成XML网站地图和robots.txt
下载
当代理已经知道网站路由或内容URL，并且在启动前需要有效的sitemap XML、sitemap索引或robots.txt引用时，请使用sitemap。这是一个发布构件技能，而不是爬虫或SEO平台。
✅ 在页面中获取参数并请求数据
在 [id].vue 中，使用 useRoute() 获取当前路由参数，并通过 useFetch() 发起服务端或客户端数据请求：
<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 的数据获取与响应式能力。
