Vue路由传参应选“最合适”的方式：params标识资源、query控制视图状态、props解耦组件与路由。三者分层协作，非互斥。
Vue 路由传参不是选“最炫”的，而是选“最合适”的。params 适合标识资源、query 适合控制视图状态、props 则是让组件真正脱离路由依赖的关键一环。三者不是互斥，而是分层协作。
params：用于标识唯一资源的路径参数
它把参数直接嵌进 URL 路径里，比如 /user/123 中的 123 就是 params。这种结构天然具备语义性和 SEO 友好性，也方便用户收藏或分享具体页面。
- 必须在路由配置中声明动态段，如
path: '/user/:id' - 编程式跳转时必须用
name+params，不能只写path（否则 params 会丢失） - 刷新页面后参数依然存在，因为它是 URL 的一部分
- 不适合传敏感信息（如 token、密码），也不适合传大量数据（URL 长度受限）
query：用于传递可变的视图状态参数
它以 ?key=value 形式拼在 URL 后面，比如 /users?tab=active&page=2。这类参数不改变资源本质，只影响当前页面如何展示。
- 无需提前配置路由，任何路径都可带 query
- 支持用
path或name跳转，灵活性更高 - 常用于分页、筛选、排序、搜索关键词等场景
- 参数明文可见，适合分享链接（比如“分享这个筛选结果”）
props 解耦：让组件不再绑定 $route 的关键一步
直接在组件里写 this.$route.params.id 看似简单，但会让组件强依赖路由系统，难以独立测试或复用。props 模式就是把路由参数“翻译”成标准 props，让组件回归纯粹的数据驱动逻辑。
立即学习“前端免费学习笔记（深入）”；
-
布尔模式（
props: true）：自动把params映射为 props，仅限 params，不处理 query -
对象模式（
props: { layout: 'sidebar' }）：传固定配置，适合全局一致的默认行为 -
函数模式（
props: ($route) => ({ id: $route.params.id, q: $route.query.q })）：最灵活，能同时整合 params、query、甚至 meta，推荐在复杂页面使用
Vue 2 与 Vue 3 的关键差异点
核心逻辑一致，但 API 写法和默认行为有调整：
- Vue 2 使用
this.$route和this.$router；Vue 3 推荐组合式 API：useRoute()获取参数，useRouter()控制导航 - Vue 3 的
props函数写法中，$route替换为route（来自useRoute()），且需注意响应性——函数返回的对象默认不响应，如需响应建议配合toRefs或使用computed - Vue 3 支持可选参数（
:id?）和正则约束（:id(\d+)），params 的表达能力更强 - Vue 3 中，未命名的
params（即不用name直接 push path + params）已不被推荐，容易出错
