【Nuxt.js】ルートを拡張してページネーションを静的化する

【Nuxt.js】ルートを拡張してページネーションを静的化する

Vue.js

本一覧ページを例にルートを拡張してページネーションを静的化する処理を実装していきます。実際のページネーションの処理は省略しています。

ルートを拡張する

nuxt.config.jsのrouterプロパティにextendRoutesオプションを追加することで、Nuxt.js によって作成されたルートを拡張することができます。今回は本一覧ページにページネーションを拡張するので以下のような実装になります。

 

・nuxt.config.js

 

ちなみに/libraries/1(ライブラリID)/books/page/1のように間にID(例ではライブラリID)を挟んでルートを拡張したい場合は以下のような感じになります。page構成はpages/libraries/_libraries/reviews.vueでファイルを作成します。

 

・extendRoutesオプション

router プロパティを使って Nuxt ルーターをカスタマイズできます。
ja.nuxtjs.org

 

generateのタイミングでページネーションに必要なデータを渡す

ページネーション用にルートを拡張したら、必要なページの生成とページごとのデータをpayloadで渡していきます。例として本のデータと総件数をもとにページの生成をしています。

10のところは1ページあたりに表示するデータ数で、とりあえずそのまま書いてますがconfigファイルを用意して設定しておきましょう。総件数を10で割った余りが0とそうではない場合で条件分岐し、その回数分ループするようにしています。これは例えば総件数が20件の場合は10で割った余りが0であり、20 / 10で2回分ループします。総件数が21件の場合は10で割った余りが0でないため(20 / 10) + 1となり3回分ループします。1ページに表示できる件数は10件までであるため、このようなロジックになります。

 

generateで渡されたデータをそれぞれのページで受け取る

ページネーションのページごとにpayloadで渡されたデータから表示分のデータと総件数をstoreにセットします。mapGettersでstoreからデータを取り出してPagerコンポーネントにデータを渡しています(Pagerコンポーネントの実装部分は省略)。payloadで渡されない場合は別途APIから取得するようにしています。

 

・pages/books/index.vue