はじめに

Nuxt.jsを使ったサイトでナビゲーションバーを実装していた際に、同じページのリンクをクリックした時もリロードさせたかったのですが、nuxt-link を使用していた場合、イベントが何も走らないので、強制リロードを実行することができません。

色々試した結果、Nuxt.jsのissueに挙げられていた方法に落ち着いたのでメモします。

実装方法

router.go() を利用して実装します。
router.go()は本来、引数に指定した数のhistoryを進めたり戻したりできるメソッドですが、
引数にpathを指定することもできるので、それを利用します。
現在のページをpathに指定することで、同じページでも強制的にリロードが走ります。

<button @click="$router.go({path:'/top', force: true})">TOP</button>

注意

ただし、router.go()でリロードさせる場合、 beforeEnterLeave()などの画面遷移オプションがうまく機能しないので、注意が必要です。
私の場合はbeforeEnterLeave()に画面遷移アニメーションを記述していたので、実装方法を変更することになりました...。