nuxt.js + microCMS でブログを作成したが、詳細ページが作成できない

Question

解決できないこと

microCMSで作成したブログの詳細ページを作ることができない。

やりたいこと

ポートフォリオサイトにブログを付けたい。
サイト全体をnuxtjsで実装しており、ブログ部分はmicroCMSで実装を考えている。

ブログ箇所のコード

// pages/blog.vue

<template>
  <div class="main-content">
    <div class="l-content">
      <div class="blog-block">
        <div class="blog-block-list" v-for="(item, index) in items" :key="index">
          <nuxt-link :to="'blog/' + item.id">
            <p class="key-catch"> <img :src="item.key.url" alt=""></p>
            <div class="blog-info">
              <h3 class="blog-title">{{ item.title }}</h3>
            </div>
          </nuxt-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      items: []
    };
  },
    async asyncData() {
      const{data} = await axios.get(
        'https://dummy.microcms.io/api/v1/blog',
        {
          headers: { 'X-API-KEY': 'dummyAPI' }
        }
      );
      return {
        items:data.contents
      };
    }
};
</script>

//pages/blig/_id.vue

<template>
  <div class="main-content">
    <div class="l-content">
      <h2>{{ item.title }}</h2>
      <div class="content" v-html="item.disc"></div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  async asyncData({ params }) {
    const { data } = await axios.get(
      `https://dummy.microcms.io/api/v1/blog/${params.id}`,
      {
        headers: { 'X-API-KEY': 'dummyAPI' }
      }
    );
    return {
      items:data
    };
  }
};
</script>

出ているエラー

GET https://dummy.microcms.io/api/v1/blog/undefined 404
Error: Request failed with status code 404
Uncaught (in promise) Error: Request failed with status code 404

試したこと

_id.vueの方から{ params }と${params.id}の記述を取り除くと、一覧ページは表示されるようになりました。
つまり、_id.vueの方のURLがうまく取得できていないのではないかと考えましたが、それをどうやって解決すれば良いかがわかりません。

ご教授いただけますと幸いでございます。

参考にしたサイト

https://microcms.io/blog/create-nuxt-microcms-recruit
https://www.notion.so/microCMS-Nuxt-Jamstack-c7d68e68085a400f8eeb1887e97cdd6f
https://web-niar.com/blog/nuxtjs-microcms-vercel/

Answer 1

階層の変更

pages/blog.vue → pages/blog/index.vue

コードの変更

// pages/blog/index.vue

<script>
import axios from "axios";
export default {
  async asyncData() {
    const{data} = await axios.get(
      'https://dummy.microcms.io/api/v1/blog',
      {
        headers: { 'X-API-KEY': 'dummyAPI' }
      }
    );
    return {
      items:data.contents
    };
  }
};
</script>

// pages/blog/_id.vue

<script>
import axios from "axios";
export default {
  async asyncData({ params }) {
    const { data } = await axios.get(
      `https://dummy.microcms.io/api/v1/blog/${params.id}`,
      {
        headers: { 'X-API-KEY': 'dummyAPI' }
      }
    );
    return {
      item:data
    };
  }
};
</script>

原因

• blogディレクトリとblog.vueのぶつかり合い。
• 記事詳細ページの所得方法の間違い。

　pages/blog/_id.vueのreturn の箇所。