【Nuxt.js/Vue.js v2】<nuxt-link>や$router.pushで同じパスに遷移すると画面が更新されない

やりたいこと

<nuxt-link>や$router.pushを使って同じパスのURLに遷移したとき、パラメータが追加・変更されていれば画面を更新したい。
ただ普通に遷移すると、同じパスへのアクセスなので画面のレンダリングが走らない。

対応策

beforeRouteUpdateを定義しておくと、パラメータ違いのURLに遷移した場合に実行されます。

<template>
    <nuxt-link :to='/search?q=1'>
        リンク
    </nuxt-link>
</template>

<script>
    export default {
        beforeRouteUpdate(to, from, next) {
            next()
            this.hoge() // 表示用のデータを更新する処理
        },
    }
</script>

next()の後に、ページ遷移後(URL更新後)に実行したい処理を入れます。
(URL変更前に実行したい処理があれば、next()の前に入れましょう。)

また、beforeRouteUpdateは<a>などで直接URLにアクセスした場合には実行されません。
実行される条件は以下になります。

1. <nuxt-link>や$router.pushでの、アプリケーション内の遷移時
2. 同じパスへの遷移時
3. パラメータやハッシュ(#)が追加・変更されていること
   (パラメータの値が同じだと実行されない)

あとがき

URLのパラメータを利用した検索機能を実装するときに、
クライアントサイドのみのレンダリングでやってみようと思い、
上記のような対応を行いました。