本文详解如何在 Nuxt 3 中通过文件系统约定（/pages/info/[id].vue）实现动态路由，并使用 useRoute() 和 useFetch() 在页面中按需拉取 localhost:3000/api/info/${id} 的数据，完成 localhost:3000/info/${id} 的完整跳转与渲染。
本文详解如何在 nuxt 3 中通过文件系统约定（`/pages/info/[id].vue`）实现动态路由，并使用 `useroute()` 和 `usefetch()` 在页面中按需拉取 `localhost:3000/api/info/${id}` 的数据，完成 `localhost:3000/info/${id}` 的完整跳转与渲染。
在 Nuxt 3 中，动态路由无需手动配置，而是基于文件系统自动推导。只需在 pages/ 目录下创建符合命名规范的文件即可。例如，要支持 /info/123、/info/abc 这类路径，应在项目中新建文件：
pages/info/[id].vue
方括号 [id] 表示这是一个动态段（dynamic segment），Nuxt 会自动将其解析为路由参数 id。
在该页面组件中，推荐使用组合式 API 配合 useRoute() 获取参数，并用 useFetch() 发起服务端或客户端数据请求。以下是一个完整、健壮的实现示例：
<!-- pages/info/[id].vue -->
<template><div v-if="pending">
<p>Loading...</p>
</div>
<div v-else-if="error">
<p>Error: {{ error.message }}</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>
<h1>Info for ID: {{ route.params.id }}</h1>
<pre class="brush:php;toolbar:false;">{{ JSON.stringify(info, null, 2) }}
<script setup>
const route = useRoute()
const { pending, data: info, error } = await useFetch(`/api/info/${route.params.id}`)
</script>
✅ 关键说明：
- useRoute() 返回当前路由对象，route.params.id 即 URL 中匹配到的动态值（如 /info/42 → id = '42'）；
- useFetch() 默认启用服务端预渲染（SSR），在服务端获取数据后注入 HTML，提升首屏性能和 SEO；
- 若 API 路径含特殊字符（如斜杠、空格），建议对 id 做 URL 编码处理（encodeURIComponent(route.params.id)），但通常纯数字或字母 ID 可直接拼接；
- 务必添加加载态（pending）与错误态（error）处理，避免空白页或未捕获异常。
⚠️ 注意事项：
- 确保你的 API 端点 localhost:3000/api/info/:id 已正确实现并返回有效 JSON；
- 若需支持嵌套路由（如 /info/123/edit），可使用嵌套目录结构：pages/info/[id]/edit.vue；
- 不建议在 setup 中直接使用 route.params.id 作响应式依赖——useRoute() 返回的对象是响应式的，其 params 会随路由变化自动更新，但 useFetch 的 await 仅在组件初始化时执行一次；如需监听 ID 变化并重新获取数据，请改用 watch + refresh() 或启用 immediate: false 后手动触发。
通过以上方式，你就能零配置地实现语义清晰、SEO 友好、数据驱动的动态页面，真正践行 Nuxt 3 “约定优于配置”的设计哲学。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
