vue router 的 props 配置支持布尔、对象、函数三种模式：布尔模式自动透传 params；对象模式注入静态值；函数模式灵活加工参数；命名视图需为各视图单独配置 props。
直接用 props 传参，能去掉组件里对 $route 或 useRoute() 的依赖，让组件更干净、可复用、易测试。
布尔模式：自动透传 params 参数
适合路径参数明确、结构固定的场景，比如 /user/:id、/post/:slug。
-
路由配置中设
props: true，Vue Router 会把route.params全部转为组件 props - 组件只需声明对应 prop 名，无需手动解构
$route.params - 示例：
{ path: '/user/:id', component: User, props: true }→ 组件内defineProps({ id: String })
对象模式：传静态配置值
适合页面级固定配置，比如标题、开关状态、默认视图等，不依赖 URL 变化。
- 直接写死一个对象，所有 key-value 都会作为 props 注入组件
- 组件仍需声明接收的 prop 名，例如
showHeader、theme - 示例：
{ path: '/admin', component: AdminLayout, props: { showSidebar: true, title: '系统管理' } }
函数模式：灵活处理 query、params 和类型转换
适合需要加工参数的场景，比如把字符串 page 转成数字、合并多个查询项、补充默认值。
- 传入一个函数，接收
route对象，返回要传递的 props 对象 - 可同时读取
route.params、route.query、route.hash - 示例：
props: route => ({ id: Number(route.params.id), q: route.query.q || '' })
命名视图场景下的 props 分别配置
当一个路由使用多个命名视图（如 default + sidebar）时，不能统一设 props: true。
- 必须用对象形式为每个视图单独指定策略，例如
props: { default: true, sidebar: { mode: 'compact' } } - 避免某个视图因 props 不匹配而报错或渲染异常
- 确保各子组件只接收它真正需要的参数，逻辑边界清晰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
