Vue.js 如何在不更改路由的情况下在vue中删除或添加querystring？

如何在不更改渲染路径的情况下在vue中删除或添加查询字符串

我想在单击按钮时执行此操作：

onClick() {
 this.$route.params.add('key', value); //localhost:8080/?key=value
 this.$route.params.add('name', value); //localhost:8080/?key=value&name=value
 this.$route.params.remove('key') //localhost:8080/?name=value
}

---

在

onClick

方法中，首先更新查询对象，然后将其推送到

$router

：

onClick() {
  const query = this.$route.query;

  // add key
  query.key = value;

  // delete name
  delete query.name;

  this.$router.push({ query: query });
}

---

通过这种方式，您可以反应性地更改$router查询，而无需刷新页面

，这意味着您正试图导航到与以前相同的位置。如果查询不同，则不应显示该错误，因为这会导致组件重新渲染。例如，它会在路由更新之前触发我不想要的

。只是为了替换/添加/删除url..@JonSud中的查询字符串，实际上并没有重新呈现组件。如果在组件上添加一个
beforeUpdate
hook，您将看到它不会启动。但是，您正在更新路由，这将导致在路由更新之前触发
。此上的所有内容。$route

应该是只读的，因此即使有效，这也不是理想的解决方案

onClick() {
  this.$route.query.key = value;   // localhost:8080/?key=value
  this.$route.query.name = value;  // localhost:8080/?key=value&name=value
  delete this.$route.query.key;    // localhost:8080/?name=value
}