今回達成すること

カテゴリーのコンテンツページ（pages/categories/_slug.vue）を作成します。

コンテンツページの要件

カテゴリーコンテンツページの要件は以下の3つです。

1. タイトルや詳細などのカテゴリーデータの表示
2. 存在しないパスが投げられた場合に404エラーを発生させる
3. カテゴリーに関連づくブログ記事一覧を表示する

この記事では上記、1, 2を実装します。

paramsからカテゴリーを取得する

コンテンツページに投げられたparamsから、カテゴリーオブジェクトを取得します。

前回作成したcategories/_slug.vueのasyncData()内で、Vuexの配列からカテゴリーを取得します。

pages/categories/_slug.vue

<template>
  <v-container>
    ...
    <!-- 追加 -->
    category: {{ category }}
  </v-container>
</template>

<script lang="ts">
import { Context } from '@nuxt/types'
import { Component, Vue } from 'nuxt-property-decorator'
import { BlogCategory } from '~/store/types'

type AsyncData = {
  category: BlogCategory
}

@Component
export default class CategoriesSlugPage extends Vue {
  asyncData ({ app: { $accessor }, params }: Context): AsyncData {
    const category: BlogCategory | undefined =
      $accessor.categories.find((category: BlogCategory) =>
        category.fields.slug === params.slug
      )

    return {
      category
    }
  }
}
</script>

• asyncData({ params }) ... asyncDataの引数にはリンクに含まれるパラメータ（params）を取得できる。
• $accessor.categories.find() ... Vuexに保存したカテゴリー配列から、find()メソッドを使用してparams.slugと一致するカテゴリーを取得している。

カテゴリーが存在しない場合は404を返す

上記のままでは、存在しないパラメーターが投げられた場合に categoryはundefinedを返します。

そこでcategoryが存在しない場合は404エラーを返すように編集します。

pages/categories/_slug.vue

<script lang="ts">
import { Context } from '@nuxt/types'
import { Component, Vue } from 'nuxt-property-decorator'
import { BlogCategory } from '~/store/types'

// void 追加
type AsyncData = void | {
  category: BlogCategory
}

@Component
export default class CategoriesSlugPage extends Vue {
  // ({ ..., error }) 追加
  asyncData ({ app: { $accessor }, params, error }: Context): AsyncData {
    const category: BlogCategory | undefined =
      $accessor.categories.find((category: BlogCategory) =>
        category.fields.slug === params.slug
      )

    // 追加
    if (!category) {
      return error({ 
        statusCode: 404, 
        message: 'This page could not be found' 
      })
    }

    return {
      category
    }
  }
}
</script>

• type AsyncData = void | { category: BlogCategory } ... Nuxtのerror()メソッドはvoidを返すのでvoid型を追加している。
• message: 'This page could not be found' ... Nuxtの404エラーメッセージと同じメッセージにしている。これは404エラーメッセージに日本語化を容易にする目的がある。

カテゴリーのコンテンツページにアクセスして、オブジェクトが表示できているか確認してください。

存在しないパスにアクセスすると404エラーが返されることも確認します。

パラメーターが存在しない場合は404を返す

リンクにパラメーターが存在しない時点で、カテゴリーが見つからないのは明白です。

そこで、Nuxtのvalidate()メソッドを使用して、params.slugが存在しない時点で404エラーを返すよう設定します。

Nuxtのvalidate()メソッドは、asyncData()の前に実行されるので一番上に追加します。

参考: Nuxt Lifecycle

@Component
export default class CategoriesSlugPage extends Vue {
  // 追加
  validate ({ params }: Context): boolean {
    return !!params.slug
  }
}

• validate() ... メソッド内の式がtrueを返す場合にページを表示する。falseの場合は404エラーを返す。

これで、パラメーターが付かないパス /categories で404エラーが返されるようになりました。

最終的なカテゴリーコンテンツページのコード

最終的なコードは以下の通りです。

pages/categories/_slug.vue

<template>
  <v-container>
    <nuxt-link
      to="/"
    >
      Home
    </nuxt-link>

    <div>
      categories/_slug.vue
    </div>

    category: {{ category }}
  </v-container>
</template>

<script lang="ts">
import { Context } from '@nuxt/types'
import { Component, Vue } from 'nuxt-property-decorator'
import { BlogCategory } from '~/store/types'

type AsyncData = void | {
  category: BlogCategory
}

@Component
export default class CategoriesSlugPage extends Vue {
  validate ({ params }: Context): boolean {
    return !!params.slug
  }

  asyncData ({ app: { $accessor }, params, error }: Context): AsyncData {
    const category: BlogCategory | undefined =
      $accessor.categories.find((category: BlogCategory) =>
        category.fields.slug === params.slug
      )

    if (!category) {
      return error({
        statusCode: 404,
        message: 'This page could not be found'
      })
    }

    return {
      category
    }
  }
}
</script>

今回の作業は以上です。コミットしておきましょう。

% git commit -am "Add process of get category content for categories/_slug.vue"

まとめと次回

今回はcategories/_slug.vueにカテゴリーのコンテンツを表示する実装を行いました。

次回は、このコンテンツページにカテゴリーに関連づく記事一覧を表示します。