10. Vue 跳转路由时的传参方式 (query 和 params 的区别)

在 Vue 中，我们可以使用 `router-link` 或 `$router.push` 方法进行路由跳转。在进行路由跳转时，有两种传参方式可以选择：query 和 params。

1. query传参方式

使用 query 传参方式，参数会被追加到 URL 的查询参数中，例如：

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

这样，路由跳转后，URL 会变成 `/user?id=1`，可以在目标路由组件中通过 `$route.query.id` 来获取参数。

2. params传参方式

使用 params 传参方式，参数会被编码并添加到 URL 后面，例如：

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

这样，路由跳转后，URL 会变成 `/user/1`，可以在目标路由组件中通过 `$route.params.id` 来获取参数。

需要注意的是，在使用 params 传参方式时，需要在路由配置中定义参数名称，例如：

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

这样，路由跳转时，会将参数添加到路由路径中，例如：`/user/1`。同时，在目标路由组件中，也需要通过 `$route.params.id` 来获取参数。

总的来说，query 传参方式适合传递少量的参数，而 params 传参方式适合传递较多的参数，或者需要保留参数历史记录的场景。