$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

这是我的错误，但仍然是奇怪的行为。

Because a route is immutable Object.assign() 无法修改。奇怪的是，在我尝试修改查询字符串后，新的路由对象显示了我试图设置的值，即使浏览器没有显示它们。

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

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

（感谢 VCavallo 提供新的 link 位置）

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

$router.replace() doesn't update browser query string

vue-router

vuejs2