Vue.js路由传参主要有动态路径（:id）和查询字符串（?key=value）两种方式：前者适用于必填资源ID，需在路由配置中声明，通过params传递并监听$route.params；后者适用于可选筛选参数，无需预声明，通过query传递且刷新后保留。

Vue.js 路由传参主要有两种常用方式：动态路径（:id）和查询字符串（?key=value），它们适用场景不同，处理逻辑也不同。用错方式容易导致页面白屏、参数丢失或导航异常。

动态路径传参：适合标识性、必填的资源 ID

在路由配置中定义带参数的路径，例如 /user/:id 或 /post/:slug，参数会作为 $route.params 暴露：

• 必须在 router/index.js 中提前声明参数名，如 { path: '/user/:id', component: User }
• 跳转时使用命名路由 + params，推荐写法：this.$router.push({ name: 'User', params: { id: 123 } })
• 注意：直接用路径字符串跳转（如 /user/123）也能生效，但无法触发 params 的响应式更新，尤其在相同路径下仅参数变化时，组件不会重新渲染
• 组件内通过 this.$route.params.id 读取，建议配合 watch: { '$route.params': { handler() { ... }, immediate: true } } 监听变化

查询字符串传参：适合可选、非关键的筛选或状态

查询参数不参与路由匹配，只附加在 URL 后（如 /search?q=vue&sort=date），存于 $route.query：

Skill Weave Chains — 技能链路由引擎

开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。

下载

• 无需在路由配置中声明，任何路径都可携带，适合分页、搜索关键词、标签筛选等临时状态
• 跳转时用 query 对象：this.$router.push({ path: '/search', query: { q: 'vue', page: 2 } })
• 刷新页面后 query 仍保留，且会触发组件重新渲染（即使路径未变）
• 清空查询参数可传空对象：this.$router.push({ path: this.$route.path, query: {} })，或保留当前 params 只清 query

混合使用与常见陷阱

有时需要同时用动态段和查询参数，比如 /user/123?tab=posts&page=1：

立即学习“前端免费学习笔记（深入）”；

• 确保命名路由跳转时 params 和 query 分开传，不要混在同一个对象里（params 用于路径占位，query 用于问号后）
• props: true 开启后，params 会自动注入组件 props，但 query 不会——需手动映射或用计算属性封装
• 避免在 beforeRouteUpdate 中只监听 params 却忽略 query 变化，导致筛选条件失效
• SEO 场景下，动态路径更友好；而含大量 query 的 URL 可能被搜索引擎视为重复内容

Vue Router 4（Composition API）写法差异

在 setup 中使用 useRouter 和 useRoute：

• 获取参数：const route = useRoute(); const id = route.params.id; const q = route.query.q;
• 跳转：const router = useRouter(); router.push({ name: 'User', params: { id }, query: { tab } });
• 监听变化推荐用 watch 监听 route.params 或 route.query，而非生命周期钩子
• defineProps 不能直接接收 query，需通过 computed 或 watch 处理