Vueのルーターは、

Question

ルートを構築し、私は自分のアプリケーションに検索フィールドを使用してデータテーブルを作っていますし、私は、次の動作を実装したいと思います：

ときにユーザーが研究、URLが更新されます。ユーザーがリンク上で をクリックし、ナビゲーターから「戻る」を押すと、最後の 検索に戻ります。あなたが見ることができるように

export default { 
    data() { 
    return { 
     search: '' 
    } 
    }, 
    watch: { 
    search (value) { 
     this.$router.replace('/products?search=' + value) 
    } 
    } 
} 

すると、私はルータのreplace機能を使用しています：瞬間のために

は、私は次のことをやっています。それは私がそれを動作させることができます。ユーザーが検索中に「戻る」を押すと、彼は最後のページではなく最後のリサーチに行きます、そして、それはまさに私が望むものなのですから、 pushメソッドよりも優れています。

しかし、URLをどのように書き込むのが好きではありません。

私はそのようなものを作るのが大好きだ：

watch: { 
    search (value) { 
    let route = new Route(this.$route) 

    route.query.search = value 

    this.$router.replace(route.getPath()) 
    } 
} 

が、あるためのユーザーがそのようなページネーションか何かのような他のパラメータを持っていることを想像してみましょう、彼らは消去されます。私は私の実際のURLを取得し、クエリ文字列パラメータを追加/置換するメソッドが欲しいです。

私はVue Routerでこれを達成できますか、何か他のことをする必要がありますか？他のパッケージ/ Vanilla JS？

Answer 1

なぜオブジェクト位置パラメータ$router.replaceを使用するだけではありませんか？例：

watch: { 
    search (value) { 
    this.$router.replace({ path: 'products', query: { search: value }}) 
    } 
}