vuejs2 - $router.replace() 不更新浏览器查询字符串

Question

问题是查询字符串没有显示在浏览器的 URL 栏中。

代码更新查询字符串以跟踪产品配置。

有两种方法 - 第一种选择模型，第二种为该模型设置选项。这是代码(查询字符串的值现在是占位符):

方法:

chooseModel (option) {
  this.$router.replace({
    path: this.$route.path,
    query: {m: 'model'},
  })
},
choose (option) {
  if (!this.selectedModel) return
  let opt = {}
  opt[option] = option
  this.$router.push({          // I've tried push and replace
    path: this.$route.path,
    query: Object.assign(this.$route.query, opt),
  })
},

计算:

selectedModel () {
  return this.$route.query.m
},

当 chooseModel调用浏览器显示的查询字符串应为: http://localhost:8080/custom/?m=model .但是当 choose调用浏览器显示的查询字符串保持不变。

FWIW，我已更改 chooseModel 中的代码设置多个查询字符串值，它们都会显示出来。显然它正在尝试修改导致问题的值。

使用调试器我可以看到 $route.query是正确的 - 它反射(reflect)了我对查询所做的更改。

我在 Firefox 和 Chrome 上都看到了相同的行为，所以它显然不是特定于浏览器的。

我需要做什么才能让浏览器显示更新的查询字符串？

Answer 1

这是我的错误，但仍然是奇怪的行为。
Because a route is immutable Object.assign()无法修改它。奇怪的是，在我尝试修改查询字符串之后，新的路由对象显示了我试图设置的值，即使浏览器没有显示它们。
修复很简单——不要尝试修改路由对象:query: Object.assign({}, this.$route.query, opt)(感谢 VCavallo 提供新的链接位置)