Nuxt.jsでルーティングの設定を追加する

Nuxt.jsはルーティングの設定を自動で行ってくれますが、今回個別のルーティングの設定を追加したいということがあったので、設定方法をメモしておきます。

サンプルコード

今回やりたかったことは、ブログ全体の一覧ページ(/blog/)とカテゴリ別のブログ一覧ページ(/blog/カテゴリID/)のデザインが同じなので、同じテンプレートファイルを使用するという内容になります。
nuxt.config.jsのextendRoutesオプションで設定します。

export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'blog',
        path: '/blog/:categoryid',
        component: resolve(__dirname, 'pages/blog/index.vue')
      })
    }
  }
}

6行目のpathがページURLのルールで、今回の設定の場合は「/blog/XXXXX」のようなURLでアクセスした場合に適用されます。
後述しますが、「:categoryid」の部分がテンプレート側で取得可能になります。
7行目のcomponentが使用するテンプレートで、今回は「/blog/」と同じテンプレートを使用する設定になります。

次に「/blog/」のテンプレートになる「pages/blog/index.vue」のファイルを設定します。

<template>
  <h1>ブログ カテゴリID:{{ this.categoryid }}</h1>
</template>

<script>
export default {
  async asyncData({ params }) {
    const categoryid = params.categoryid;
    return { categoryid }
  }
}
</script>

8行目にあるようにparams.categoryidとすることで、nuxt.config.jsで設定した「:categoryid」部分が取得できます。
この部分を使用して、今回の場合であればカテゴリ別のブログ情報を取得して一覧表示する、「:categoryid」が無い場合は通常のブログ一覧を表示する、のような設定ができます。