Vue 动态路由实战：如何通过参数传递与匹配实现详情页跳转-Vue.js-PHP中文网

vue列表页跳详情页需配置动态路由path:'/article/:id'并设name，跳转用router.push({name,params})，接收时watch路由变化、校验id类型、props解耦，query仅传辅助参数。

vue 动态路由实战：如何通过参数传递与匹配实现详情页跳转

在 Vue 单页应用中，列表页跳转到详情页不是简单地“换一个组件”，而是要让 URL 可读、参数可靠、刷新不丢数据、返回时体验自然。核心不在传什么，而在怎么配路由、怎么跳、怎么收、怎么用。

路径里带 :id 才算真正启用动态路由：

在 router/index.js（或 .ts）中声明：{ path: '/article/:id', name: 'ArticleDetail', component: ArticleDetail }
必须配 name，后续跳转才稳定；不推荐直接拼 path 字符串
加 props: true 后，ID 会作为 prop 自动注入组件，比手动取 $route.params.id 更解耦、更易测试

这是最语义清晰、SEO 友好、且与路由定义强绑定的方式：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

列表页中写：router.push({ name: 'ArticleDetail', params: { id: 123 } })
模板里用 <router-link :to="{ name: 'ArticleDetail', params: { id: item.id } }"></router-link>
⚠️ 注意：path 和 params 不能混用——router.push({ path: '/article', params: { id: 123 } }) 会导致参数丢失

Vue Router 默认复用组件，从 /article/1 切到 /article/2 不会触发 mounted，所以不能只靠初始化取值：

启用 watch: { '$route': 'fetchData' } 或在 setup 中用 watch 监听 useRoute() 的变化
拿到 id 后别直接发请求，先校验是否为有效数字或非空字符串
如果用了 props: true，记得在组件中声明 props: { id: { type: [String, Number], required: true } }，避免 undefined 报错

比如从搜索页、分类页、分页列表点进详情，想记住“从哪来”“带了哪些筛选条件”，就用 query：

跳转时加：router.push({ name: 'ArticleDetail', params: { id: 123 }, query: { from: 'search', q: 'vue' } })
URL 变成 /article/123?from=search&q=vue，刷新后 query 依然存在
query 值永远是字符串，parseInt(route.query.id) 或 Number(route.query.id) 才能转数字

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！