Vue Router 中 params 和 query 的区别

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

1. 定义方式不同

params

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

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

query

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

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

2. URL 表现形式不同

params

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

query

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

3. 使用方法不同

传递 params

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

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

传递 query

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

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

4. 获取方式不同

获取 params

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

获取 query

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

5. 其他重要区别

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

使用场景建议

• 使用 params 当：

  • 参数是资源标识（如用户ID）
  • 参数是必需的
  • 希望URL更简洁

• 使用 query 当：

  • 参数是可选的（如分页、筛选条件）
  • 需要分享带参数的URL
  • 参数需要被搜索引擎抓取

注意事项

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

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

2. 在 Vue Router 4.x 中，如果没有在路由中定义 params 参数，它们将不会被添加到 URL 中。

3. query 参数总是字符串类型，如果需要其他类型需要手动转换。