Vue 路由中 query 和 params 传参的区别

在 Vue 路由中，params 和 query 是两种不同的参数传递方式。params 用于传递命名路由的参数，而 query 用于传递查询字符串参数。

1. params 传参

params 传参必须使用命名路由的方式，即在路由配置中使用 name 属性。例如，以下路由配置定义了一个名为 user 的命名路由，并使用 :id 来接收参数：

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

要使用 params 传参，可以在路由跳转时使用 params 对象。例如，以下代码将跳转到 /user/1 路由，并传递 id 为 1 的参数：

this.$router.push({ name: 'user', params: { id: 1 } })

在组件中，可以使用 this.$route.params 对象来获取 params 传参。例如，以下代码将获取 id 参数的值：

const id = this.$route.params.id

2. query 传参

query 传参不需要使用命名路由，可以直接在路由后面加上查询字符串。例如，以下 URL 使用 query 传参传递了 id 为 1 的参数：

/user?id=1

要使用 query 传参，可以在路由跳转时使用 query 对象。例如，以下代码将跳转到 /user 路由，并传递 id 为 1 的参数：

this.$router.push({ path: '/user', query: { id: 1 } })

在组件中，可以使用 this.$route.query 对象来获取 query 传参。例如，以下代码将获取 id 参数的值：

const id = this.$route.query.id

3. params 和 query 的区别

特征	params	query
使用方式	必须使用命名路由	不需要使用命名路由
显示位置	不显示在地址栏上	显示在地址栏上
刷新后丢失	是	否
可以配合本地存储使用	是	否

4. 使用场景

params 传参通常用于传递路由所需的数据，例如用户 ID、文章 ID 等。query 传参通常用于传递查询字符串参数，例如搜索条件、分页参数等。

5. 总结

params 和 query 是 Vue 路由中两种不同的参数传递方式，各有其不同的使用场景。params 传参必须使用命名路由，不会显示在地址栏上，刷新后丢失，可以配合本地存储使用。query 传参不需要使用命名路由，会显示在地址栏上，刷新后不丢失，不能配合本地存储使用。