vue.js - 如何在vue中删除或添加查询字符串而不更改路由？

Question

如何在 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
}

Answer 1

在 onClick 方法中，首先更新查询对象，然后将其推送到 $router:

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

  // add key
  query.key = value;

  // delete name
  delete query.name;

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