$ router.replace（）はブラウザのクエリ文字列を更新しません

Question

問題は、クエリ文字列がブラウザのURLバーに表示されないことです。

このコードは、製品構成を追跡するためにクエリ文字列を更新します。

最初のモデルはモデルを選択し、2番目のモデルはそのモデルのオプションを設定します。ブラウザディスプレイが表示されることを

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

chooseModelは、クエリ文字列を呼び出されます。

方法：

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), 
    }) 
}, 

コンピューここでは、コード（クエリ文字列の値はプレースホルダが今している）ですそれは次のようになります：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)