Vue Router 中 params 和 query 的区别

在 Vue Router 中，params 和 query 是两种不同的传递参数的方式，它们有以下主要区别：

1. 定义方式不同

params

需要在路由路径中定义参数名
适合传递必要参数（如ID）

javascript

复制

arduino 复制代码

// 路由配置
{
  path: '/user/:id',
  name: 'user',
  component: User
}

query

不需要在路由路径中定义
适合传递可选参数（如搜索条件）

javascript

复制

arduino 复制代码

// 路由配置
{
  path: '/search',
  name: 'search',
  component: Search
}

2. URL 表现形式不同

params

参数是路径的一部分
示例URL: /user/123
不显示参数名

query

参数在问号后以键值对形式出现
示例URL: /search?name=john&age=25
显示参数名和值

3. 使用方法不同

传递 params

javascript

复制

php 复制代码

// 编程式导航
router.push({ name: 'user', params: { id: 123 } })

// 声明式导航
<router-link :to="{ name: 'user', params: { id: 123 }}">用户</router-link>

传递 query

javascript

复制

php 复制代码

// 编程式导航
router.push({ path: '/search', query: { name: 'john', age: 25 } })

// 声明式导航
<router-link :to="{ path: '/search', query: { name: 'john', age: 25 }}">搜索</router-link>

4. 获取方式不同

获取 params

javascript

复制

csharp 复制代码

// 在组件中
this.$route.params.id
// 组合式API
import { useRoute } from 'vue-router'
const route = useRoute()
const id = route.params.id

获取 query

javascript

复制

kotlin 复制代码

// 在组件中
this.$route.query.name
// 组合式API
const name = route.query.name

5. 其他重要区别

特性	params	query
是否必须定义	是（在路由配置中）	否
刷新后	可能丢失（除非使用命名路由）	保留
SEO影响	较小（看起来像静态路径）	较大（可能被搜索引擎索引）
参数可见性	隐藏	明文显示
长度限制	受URL总长度限制	受URL总长度限制

使用场景建议

使用 params 当：
- 参数是资源标识（如用户ID）
- 参数是必需的
- 希望URL更简洁
使用 query 当：
- 参数是可选的（如分页、筛选条件）
- 需要分享带参数的URL
- 参数需要被搜索引擎抓取

注意事项

使用 params 时，如果使用 path 而不是 name 进行导航，params 会被忽略：

javascript

复制

php 复制代码

// 这样不会工作
router.push({ path: '/user', params: { id: 123 } })

// 这样才有效
router.push({ name: 'user', params: { id: 123 } })

在 Vue Router 4.x 中，如果没有在路由中定义 params 参数，它们将不会被添加到 URL 中。
query 参数总是字符串类型，如果需要其他类型需要手动转换。