vue 使用 this.$router.push 传参数，接参数的 query或params 两种方法示例

背景：vue项目 使用this.$router.push进行路由跳转时，可以通过query或params参数传递和接收参数。

通过query参数传递参数：

// 传递参数
this.$router.push({
  path: '/target',
  query: {
    id: 1,
    name: 'John'
  }
});
// 接收参数
this.$route.query.id  // 1
this.$route.query.name  // 'John'
1
2
3
4
5
6
7
8
9
10
11

通过params参数传递参数（用于动态路由）：

// 传递参数
this.$router.push({
  name: 'target',
  params: {
    id: 1,
    name: 'John'
  }
});
// 接收参数
this.$route.params.id  // 1
this.$route.params.name  // 'John'
1
2
3
4
5
6
7
8
9
10
11

注意事项

query参数通过URL中的查询字符串传递，而params参数通过URL中的路径参数传递。根据你的实际需求和路由配置，选择适合的参数传递方式。
需要注意的是，使用params参数时，要确保目标路由配置中动态路由参数已正确声明。例如：

// 路由配置
{
  path: '/target/:id',
  name: 'target',
  component: TargetComponent
}
1
2
3
4
5
6