query 和 params 之间的区别是什么？

这是一个很常见也很重要的问题！下面是 params 和 query 在 Vue Router（Vue 2 & 3 通用）中的区别详解：

区别如图

类型	示例 URL	获取方式	特点
params	/user/123	this.$route.params.id	动态路径参数，必须配置在路由中
query	/user?id=123&name=Tom	this.$route.query.id	查询字符串，无需路由定义

一、params：路径中的动态参数

定义方式

{
  path: '/user/:id',
  component: UserDetail
}

访问地址

/user/123

获取方式

Vue 2: this.$route.params.id

Vue 3: useRoute().params.id

二、query：URL 中的查询字符串参数

定义方式

无需特殊配置，只要 path: '/user' 即可。

访问地址

/user?id=123&name=Tom

获取方式

Vue 2: this.$route.query.id

Vue 3: useRoute().query.id

三、编程式导航传参区别（router.push）

使用 params

只能用于命名路由，且路径中必须带 :id

router.push({
  name: 'UserDetail',
  params: { id: 123 }
})

对应路由需定义：

{
  path: '/user/:id',
  name: 'UserDetail',
  component: UserDetail
}

注意：

如果使用 path 而不是 name 来跳转，params 不会生效。

使用 query

可用于任意路由，路径中不会强制绑定某个参数。

router.push({
  path: '/user',
  query: { id: 123, name: 'Tom' }
})

最终地址是：

/user?id=123&name=Tom

总结

区别	params	query
URL形式	/user/123	/user?id=123
路由定义要求	必须包含 :id	无需额外定义
是否必须命名路由	是（推荐）	否
跳转方式限制	name + params（不能用 path）	path + query 或 name + query
是否更语义化	更语义化（资源型路由）	更灵活，适合筛选、分页等