路由的传参方式有哪些？（params/query/动态路由）各自的优缺点？

路由传参是前端开发中实现页面间数据传递的核心机制，常见方式包括 Params 传参、Query 传参和动态路由，它们在实现方式、数据可见性、安全性及适用场景上存在显著差异。以下是具体分析：

1. Params 传参

定义：通过路由路径中的动态段（如 /user/:id）传递参数，参数直接嵌入 URL 路径中。
实现方式：

• 路由配置：需在路由定义中声明动态参数（如 path: '/user/:id'）。
• 参数传递：
  • 声明式导航：<router-link :to="'/user/' + userId">用户</router-link>
  • 编程式导航：this.$router.push({ name: 'user', params: { id: userId } })
• 参数获取：this.$route.params.id

优点：

• 语义化 URL：参数嵌入路径中，URL 更简洁且具有语义化（如 /user/123 直接表示用户 ID）。
• 刷新后参数保留：页面刷新后参数仍存在于 URL 中，适合需要持久化的场景。

缺点：

• 参数类型受限：所有参数会被转换为字符串，传递复杂对象需手动序列化（如 JSON.stringify）。
• 路径冲突风险：若动态参数设计不合理，可能导致路径冲突或难以维护。
• 灵活性低：必须严格按照路由配置的格式传递参数，不能随意增减。

适用场景：

• 需要传递少量固定位置的参数（如用户 ID、文章 ID）。
• 希望 URL 更简洁且具有语义化的场景（如详情页、个人资料页）。

2. Query 传参

定义：通过 URL 的查询字符串（如 /search?keyword=vue）传递参数，参数以键值对形式附加在 URL 后。
实现方式：

• 路由配置：无需特殊配置，直接使用普通路径（如 path: '/search'）。
• 参数传递：
  • 声明式导航：<router-link :to="{ path: '/search', query: { keyword: 'vue' } }">搜索</router-link>
  • 编程式导航：this.$router.push({ path: '/search', query: { keyword: 'vue' } })
• 参数获取：this.$route.query.keyword

优点：

• 灵活性高：可动态添加或移除查询参数，无需预先定义路径。
• 易于分享：查询参数可直接复制粘贴分享，适合需要书签或可分享的 URL 状态。
• 支持可选参数：可省略某些参数，无需强制传递所有键值对。

缺点：

• URL 冗长：多个查询参数会导致 URL 变长（如 /search?keyword=vue&page=1）。
• 安全性低：参数暴露在 URL 中，不适合传递敏感信息（如密码、Token）。
• 类型转换需求：所有参数会被转换为字符串，需手动转换其他类型（如数字、布尔值）。

适用场景：

• 传递少量非敏感数据（如搜索关键词、分页参数）。
• 需要动态添加参数或支持可选参数的场景（如筛选条件、排序规则）。

3. 动态路由

定义：通过路由配置中的动态路径参数（如 /user/:id/posts/:postId）实现多层参数传递，参数嵌入路径的多个段中。
实现方式：

• 路由配置：需在路径中定义多个动态段（如 path: '/user/:id/posts/:postId'）。
• 参数传递：
  • 声明式导航：<router-link :to="'/user/' + userId + '/posts/' + postId">文章</router-link>
  • 编程式导航：this.$router.push({ name: 'postDetail', params: { id: userId, postId: postId } })
• 参数获取：this.$route.params.id 和 this.$route.params.postId

优点：

• 结构化 URL：适合传递具有层次结构的数据（如用户下的文章、部门下的员工）。
• 语义化强：URL 能清晰表达数据关系（如 /user/123/posts/456 表示用户 123 的文章 456）。
• 刷新后参数保留：与 Params 传参类似，页面刷新后参数仍存在于 URL 中。

缺点：

• 路径复杂度高：多层动态参数会导致 URL 变长且难以阅读。
• 灵活性低：必须严格按照路由配置的格式传递参数，不能随意增减。
• 参数类型受限：所有参数会被转换为字符串，传递复杂对象需手动序列化。

适用场景：

• 传递具有层次结构的数据（如用户详情下的订单列表、部门下的员工信息）。
• 需要 URL 清晰表达数据关系的场景（如多级详情页、嵌套资源）。

对比总结

推荐选择

• 需要语义化 URL 或持久化参数：优先选择 Params 传参 或 动态路由。
• 需要动态添加参数或支持可选参数：优先选择 Query 传参。
• 传递敏感信息或复杂对象：避免使用 URL 传参，可结合 状态管理库（如 Pinia/Vuex） 或 本地存储（如 localStorage） 实现。