Nuxtで画面遷移した際に表示が更新されない

Nuxtで作成されたページで、リンクをクリックして画面遷移しても画面の表示が更新されない問題に遭遇した。
正確にはasyncDataが呼び出されず、dataが更新されていないような挙動になった。

原因

NuxtLinkタグで画面遷移する際、クエリ文字列の変更だけだとコンポーネントメソッド(asyncData、fetch、validate、layout など)が実行されないらしい。

解決方法

pageコンポーネントにwatchQueryプロパティを付与すると、クエリ文字列が変わるだけの場合もコンポーネントメソッド(asyncDataなど)が呼び出されるようになります。

export default {
  watchQuery: ['page']
}

コメントする