vue-router中的this.push()中的params和query有什么区别_this.$router.push params

在 Vue Router 中，this.$router.push() 方法用于进行编程式的路由导航。它可以通过传递不同的参数来实现不同的导航方式，其中包括 params 和 query 参数。

1、params 参数用于传递路由参数，它是通过路由的路径中的占位符进行传递的。例如，在定义路由时，可以使用 :id 来指定一个动态的参数：

const routes = [
  {
    path: '/user/:id',
    component: User
  }
];
1
2
3
4
5
6

使用 params 参数进行导航时，可以通过对象的形式传递参数：

// 导航到 /user/123
this.$router.push({ path: '/user/123' });
1
2

注意，参数值会替换路由路径中对应的占位符，例如上述代码中的 123 将替换为路由的实际参数值。

// User 组件中获取参数
this.$route.params.id // 获取 id 参数值
1
2

2、 query 参数用于传递查询参数，它是通过 URL 的查询字符串（?key=value）进行传递的。例如，可以在导航时添加查询参数：

// 导航到 /user?id=123
this.$router.push({ path: '/user', query: { id: 123 } });
1
2

使用 query 参数进行导航时，参数会以键值对的形式附加到 URL 中。

使用 query 参数进行导航时，参数会以键值对的形式附加到 URL 中。

this.$route.query.id // 获取 id 查询参数值
1

总结一下，params 和 query 在传递参数的方式上有以下区别：

params 参数使用路由路径中的占位符进行传递，适合传递语义化的参数，如用户ID等。
query 参数通过 URL 的查询字符串进行传递，适合传递**可选的、非必要的参数，**如分页参数、搜索条件等。
根据具体的场景和需求，你可以选择使用适合的参数传递方式。