嵌套路由传Props核心是用props: true或函数式props映射路由参数为组件prop。props: true仅映射params且名需一致；函数式props可合并params/query、转换类型、设默认值；嵌套路由需各层单独配置；注意props: true不包含query/hash，且上的:props会覆盖路由级配置。
在嵌套路由中传递 Props，核心是利用 Vue Router 的 props: true 配置或函数式 props 映射，把路由参数（$route.params、$route.query）自动转为组件的 prop，避免在组件内部手动解构或监听变化。
启用 props: true 简单映射
当路由路径中只用到 params（如 /user/:id），且组件接收的 prop 名与参数名一致时，直接设 props: true 即可：
{
path: '/user/:id',
component: UserDetail,
props: true // ✅ 自动将 { id } 作为 props 传入 UserDetail
}
此时 UserDetail.vue 可直接声明：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
export default {
props: ['id'], // 接收路由中的 :id
mounted() {
console.log(this.id) // 如 '123'
}
}
用函数式 props 灵活映射
需要合并 params、query、hash，或重命名、添加默认值、转换类型时，使用 props 函数：
- 把
id转为数字，同时透传tab查询参数 - 给未提供的参数设置默认值
- 避免组件内手动
parseInt($route.params.id)
props: route => ({
id: parseInt(route.params.id),
tab: route.query.tab || 'profile',
fromHome: route.meta.fromHome || false
})
配合命名视图与嵌套路由传参
在 <router-view></router-view> 嵌套场景下（如布局页内嵌子路由），父路由配置 props: true 或函数不影响子路由；每个子路由需单独配置自己的 props 映射：
- 父路由
/project/:pid→ 传pid给 Layout - 子路由
/project/:pid/settings→ 单独配props: true，把pid也传给 Settings 组件 - 也可在子路由 props 函数里访问
route.matched向上取父级 params
注意事项与避坑点
-
props: true只映射params，不包含query和hash - 若路由有
props: true，又在<router-view></router-view>上写了:props，后者会覆盖前者 - 函数式 props 中，
route是当前匹配的路由记录对象，不是响应式，但 Vue Router 会自动在路由变更后重新调用该函数并更新 props - 组件中仍可同时接收普通 props 和路由映射的 props，无冲突
