2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Nuxt.js】同一リンクでも強制リロードさせる

Posted at

はじめに

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()に画面遷移アニメーションを記述していたので、実装方法を変更することになりました...。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?