本文详解如何在 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 class="brush:php;toolbar:false;">{{ info }}