本文详解如何在 Nuxt 3 中通过文件系统约定（如 [id].vue）定义动态路由，并使用 useRoute() 获取 URL 参数，再结合 useFetch() 请求对应 ID 的后端数据，实现类似 /info/123 这样的可变路径页面。
本文详解如何在 nuxt 3 中通过文件系统约定（如 `[id].vue`）定义动态路由，并使用 `useroute()` 获取 url 参数，再结合 `usefetch()` 请求对应 id 的后端数据，实现类似 `/info/123` 这样的可变路径页面。
在 Nuxt 3 中，动态路由无需手动配置，而是通过文件名约定自动实现。要支持 localhost:3000/info/123 这类路径，你只需在 pages/ 目录下创建一个动态路由文件：
pages/
└── info/
└── [id].vue ← 动态段：方括号包裹的参数名该文件将匹配所有形如 /info/:id 的路径（例如 /info/42、/info/abc），其中 id 值可通过 useRoute() 获取。
✅ 正确获取并使用动态参数
在 [id].vue 文件中，使用组合式 API 获取路由参数并发起数据请求：
在SEO发布前，从路由清单生成XML网站地图和robots.txt
下载
当代理已经知道网站路由或内容URL，并且在启动前需要有效的sitemap XML、sitemap索引或robots.txt引用时，请使用sitemap。这是一个发布构件技能，而不是爬虫或SEO平台。
<script setup>
const route = useRoute()
// 注意：route.params.id 是字符串类型，必要时需转换（如 parseInt）
const { data: info, pending, error } = await useFetch(`/api/info/${route.params.id}`)
</script>
<template>
<div v-if="pending">
加载中...
</div>
<div v-else-if="error">
请求失败：{{ error.message }}
</div>
<div v-else>
<h1>信息详情</h1>
<pre>{{ info }}</pre>
</div>
</template>? 关键点说明：
- useRoute() 返回当前路由的响应式对象，route.params.id 即 URL 中的动态片段；
- useFetch() 支持服务端预取（SSR），默认在服务端执行，确保首屏数据直出；
- 若需处理多个参数（如 /info/[category]/[id]），对应文件路径为 info/[category]/[id].vue，参数通过 route.params.category 和 route.params.id 分别访问。
⚠️ 注意事项与最佳实践
- 参数校验不可省略：生产环境建议添加空值或格式校验（例如 if (!route.params.id) navigateTo('/info')）；
- 错误边界处理：useFetch 的 error 对象可用于捕获 404 或网络异常，建议配合 <ClientOnly> 或自定义错误提示；
- SEO 友好性：Nuxt 3 默认为动态路由生成静态 HTML（若启用 target: 'static'），但含动态参数的页面需确保 useFetch 返回有效数据，否则可能影响爬虫索引；
- 命名规范：动态段必须用英文方括号（[id]），不支持连字符或特殊符号；如需可选参数，请使用 [[id]].vue（注意双括号）。
通过以上方式，你就能轻松将 /api/info/xxx 接口映射到语义化前端路由 /info/xxx，兼顾开发效率与用户体验。
