Vue Router向嵌套路由子组件传参有四种方式：1.用params传动态路径参数，子组件直接读取$route.params；2.用query传可选筛选参数，URL可见且可刷新保留；3.设props:true自动将params转为组件props提升可读性；4.在router-view上v-bind透传父组件响应式数据，但易破坏路由状态一致性。
Vue Router 向嵌套路由的子组件传递父级参数，核心在于明确“参数来源”和“传递路径”。不是所有参数都必须从父组件显式传给子组件——多数情况下，参数是通过路由配置本身定义、再由 Vue Router 自动注入子组件的。关键看你是想传静态值、动态 URL 参数，还是希望复用父组件的数据状态。
用 params 传动态路径参数（推荐用于标识类数据）
这是最常见也最符合 RESTful 风格的方式。父路由路径中定义占位符，子路由直接继承并解析。
- 在路由配置中，子路由 path 写相对路径（如 profile），并在父路由的 children 数组里声明；父路由路径本身可含 params（如 /user/:id），这样整个嵌套结构都能访问 $route.params.id
- 子组件无需额外操作，直接用 this.$route.params.xxx（Vue 2）或 useRoute().params.xxx（Vue 3 Composition API）读取
- 示例：访问 /user/123/profile，子组件 Profile.vue 中 useRoute().params.id 就是 "123"
用 query 传非必要、可选的筛选参数
适合排序、分页、搜索关键词等不改变资源主体、但影响子组件展示逻辑的参数。
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 父组件跳转时，在 router-link 或 $router.push 的 to 对象中加 query: { tab: 'active', page: 2 }
- URL 变为 /user/123/profile?tab=active&page=2，子组件通过 $route.query.tab 获取
- 优点是参数可见、可分享、可刷新保留；缺点是不适合敏感或长字符串
用 props: true 让路由参数自动转为组件 props
避免在子组件里反复写 $route.xxx，提升可读性和可测试性。
立即学习“前端免费学习笔记（深入）”；
- 在子路由配置项中添加 props: true，Vue Router 会把 params（及 query，如果启用）自动作为 props 注入组件
- 子组件只需声明 props: ['id', 'tab']（Vue 2 Options API）或 const props = defineProps(['id'])（Vue 3 Setup）
- 注意：只对 params 路径参数默认生效；若还需 query，需改用 props: route => ({ ...route.params, ...route.query })
用 v-bind 在 router-view 上透传父组件数据（慎用）
仅适用于子组件确实需要父组件当前响应式状态（比如编辑中的表单草稿、临时筛选条件），且该状态与路由无关时。
- 在父组件模板的 <router-view> 标签上绑定属性，如 <router-view :user-info="currentUser"></router-view>
- 子组件通过 props 接收，和普通父子通信一致
- ⚠️ 缺点明显：破坏路由驱动视图的单一数据源原则；URL 不同步；前进/后退时状态易丢失；不适用于多级嵌套或动态加载场景
