Nuxt.js で querystring を用いたページネーションをする

Caramelize で詰まった部分、簡素に別ページに分けたほうがナレッジとしては便利かなと思ったので若干悩んだ && 調べても特段日本語情報が出てこなかった部分に関して書く。

よく記事一覧で /?p=1 などでページネーションをしたいことはあると思うのだが、Nuxt.js はパフォーマンスのため標準状態のコンポーネントでは querystring の変化ではコンポーネントの更新は行われず、url に /?p=1 が添付されるもののページの内容が変化しない。

これは watchQuery という値を設定してやることで明示的にページ遷移対象に含めてやることができる。

実装

script.ts

export default Vue.extend({ 
  watchQuery: ["p"], 
  async asyncData({ query }) { 
    const page = parseInt(query.p as string) || 0 
    ... 
})