問題是查詢字符串沒有顯示在瀏覽器的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的相同行爲,所以它顯然不是瀏覽器特定的。
我需要做什麼才能讓瀏覽器顯示更新後的查詢字符串?