如何在 Nuxt 3 中实现动态路由并获取参数化 API 数据-html教程-PHP中文网

本文详解如何在 Nuxt 3 中创建动态路由（如 /info/:id），通过 useRoute() 获取 URL 参数，并结合 useFetch() 动态请求后端 API，实现页面内容随 ID 实时响应。

本文详解如何在 nuxt 3 中创建动态路由（如 `/info/:id`），通过 `useroute()` 获取 url 参数，并结合 `usefetch()` 动态请求后端 api，实现页面内容随 id 实时响应。

在 Nuxt 3 中，动态路由是构建内容驱动型应用（如详情页、用户档案页）的核心能力。要将原本需手动拼接的 API 请求（如 localhost:3000/api/info/123）映射到语义化前端路由（如 localhost:3000/info/123），关键在于两步：定义动态路由路径结构 + 在组件中安全读取并使用参数发起数据请求。

✅ 步骤一：创建动态路由文件

在 pages/ 目录下新建文件，命名需遵循 Nuxt 的动态路由约定：

pages/info/[id].vue

该文件会自动匹配 /info/任意值路径（如 /info/42、/info/abc），其中 [id] 表示一个可变的 URL 参数。

✅ 步骤二：在组件中获取参数并请求数据

利用 Nuxt 提供的组合式 API，推荐在 <script setup> 中使用 useRoute() 和 useFetch()：</script>

<script setup>
const route = useRoute()
const { data: info, pending, error } = await useFetch(`/api/info/${route.params.id}`, {
  // 可选：添加错误处理或加载状态逻辑
  watch: [() => route.params.id], // 当 id 改变时自动重新请求（适用于客户端导航）
})
</script><template><div v-if="pending">
    <p>Loading...</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5360" title="Skill Weave Chains — 技能链路由引擎"><img
														src="https://img.php.cn/upload/skill/000/000/081/179047814579604.jpg" alt="Skill Weave Chains — 技能链路由引擎" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill5360" title="Skill Weave Chains — 技能链路由引擎" class="overflowclass">Skill Weave Chains — 技能链路由引擎</a>
													<p class="overflowclass">开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill5360" title="Skill Weave Chains — 技能链路由引擎" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
  </div>
  <div v-else-if="error">
    <p>Error: {{ error.message }}</p>
  </div>
  <div v-else>
    <h1>{{ info?.title || 'Info Detail' }}</h1>
    <p>{{ info?.content }}</p>
  </div>
</template>

⚠️ 注意事项：

route.params.id 返回的是字符串类型，若后端要求数字 ID，需显式转换：parseInt(route.params.id)；

使用 watch: [() => route.params.id] 确保在客户端路由跳转（如从 /info/1 → /info/2）时触发重新请求；

若需服务端渲染（SSR）支持，请确保 API 接口可被服务端访问（避免仅限浏览器环境的 window 依赖）；

建议为 useFetch 添加 key 参数（如 key: 'info-' + route.params.id）以避免缓存混淆。