VueRouterで他のクエリをそのままにしたい

Question

Vuejs2のお話です。

例えば、

http://example.com/test?keyword=hello&page=2

となっている時に

<router-link :to="{query: {page: 1}}">«</router-link>

みたいな感じのリンクを踏むと、

http://example.com/test?page=1

になってしまいます。

keywordのクエリをそのままにしておきたいのですが、いちいちrouter-linkのtoにkeywordについても書かなくてはならないでしょうか？

書こうと思えば書けるのですが、そういった実装だと、keywordクエリがそもそもあるか、など色々と条件分岐が複雑になってしまい見にくくなるので、

他のクエリに影響を与えずに指定したクエリについてのみ変更を加えるrouter-linkの書き方

があれば教えてください！

よろしくお願いします。

Answer 1

現在のページのクエリをそのまま引き継いで、pageだけを変更したいと言う場合は以下のように現在のルートオブジェクトのクエリデータをマージすると意図に叶うでしょうか

<router-link tag="li" :to="{query: Object.assign({},$route.query,{page: 1})}" exact><a>home2</a></router-link>