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()无法修改它。奇怪的是，在我尝试修改查询字符串后，新路由对象显示了我试图设置的值，即使浏览器没有显示它们。

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

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

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

$ router.replace（）不会更新浏览器查询字符串

1 个答案: