$ 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是正确的-它反映了我对查询所做的更改。

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

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

Answer 1

这是我的错误，但行为异常。

由于路由是不可变的（https://router.vuejs.org/en/api/route-object.html）Object.assign()无法对其进行修改。奇怪的是，在尝试修改查询字符串后，即使浏览器未显示，新的路由对象也显示了我尝试设置的值。

修复很简单-不要尝试修改route对象：

query: Object.assign({}, this.$route.query, opt)

新的链接位置https://router.vuejs.org/api/#the-route-object。（感谢VCavallo）