在前端路由开发中，经常需要在页面间传递参数。Vue Router 提供了两种主要的传参方式：params 和 query。

一、params 参数

URL 形式：/user/123 或 /article/abc

特点：

• 参数是 URL 路径的一部分
• 必须在路由配置中定义，如 /user/:id
• 参数是必需的（除非定义为可选参数）
• URL 更简洁、更符合 RESTful 风格
• 刷新页面参数不会丢失
• 代码示例：

// 路由定义
{ path: '/user/:id', component: User }

// 传参方式
this.$router.push({ name: 'user', params: { id: 123 }})
// 或者
this.$router.push('/user/123')

// 接收参数
this.$route.params.id  // 输出: 123

二、query 参数

URL 形式：/user?id=123&name=tom

特点：

• 参数通过 ? 拼接在 URL 后面
• 不需要在路由中预先定义
• 参数是可选的
• 可以同时传递多个参数
• 刷新页面参数不会丢失
• 代码示例：

// 传参方式
this.$router.push({ 
  path: '/user', 
  query: { id: 123, name: 'tom' }
})

// 接收参数
this.$route.query.id    // 输出: 123
this.$route.query.name  // 输出: tom

三、主要区别对比

四、使用建议

使用 params 的场景：

• 推荐标识唯一资源，如用户 ID、文章 ID
• 推荐核心业务参数，路径中体现资源层级
• 推荐必需参数，没有该参数页面无法渲染
• 示例：

// ✅ 推荐：查看用户详情
/user/123

// ✅ 推荐：查看文章详情
/article/abc-def-ghi

// ✅ 推荐：编辑项目
/project/456/edit

使用 query 的场景：

• 推荐搜索条件、筛选参数
• 推荐分页参数（page、pageSize）
• 推荐可选的配置参数
• 推荐需要传递多个参数的场景
• 示例：

// ✅ 推荐：搜索用户列表
/users?keyword=john&page=1&pageSize=10

// ✅ 推荐：筛选文章
/articles?category=tech&tag=vue&sort=latest

// ✅ 推荐：带状态的列表页
/orders?status=pending&startDate=2024-01-01

五、注意事项

• params 配合 name 使用：使用 params 传参时，必须使用命名路由（name），不能使用 path
• query 更灵活：query 可以同时使用 path 或 name
• 参数类型：URL 中的参数都是字符串类型，需要时记得类型转换
• 敏感信息：不要在 URL 中传递敏感信息（密码、token 等）
• 错误示例：

// ❌ 错误：params 不能配合 path 使用
this.$router.push({ 
  path: '/user', 
  params: { id: 123 }  // 参数会丢失
})

// ✅ 正确：params 配合 name 使用
this.$router.push({ 
  name: 'user', 
  params: { id: 123 }
})

六、总结

选择 params 还是 query 主要取决于参数的性质：

• 如果参数是资源标识符，用 params
• 如果参数是可选配置，用 query

合理使用这两种传参方式，能让你的路由结构更加清晰、语义化，提升代码的可维护性。