Nuxt.jsで動的なルートとパラメータを使用する方法:コード例付きの詳細ガイド

動的なルートの作成: Nuxt.jsでは、pagesディレクトリ内に作成したファイルが自動的にルートとして認識されます。動的なルートを作成するには、ファイル名にアンダースコアとパラメータ名を追加します。例えば、"pages/posts/_id.vue"というファイルを作成すると、"/posts/:id"というルートが作成されます。
パラメータの取得: 動的なルートで指定されたパラメータは、Nuxt.jsのcontextオブジェクトを介して取得できます。例えば、"_id.vue"ファイル内で以下のように記述することで、パラメータを取得できます。

export default {
  async asyncData({ params }) {
    const postId = params.id;
    // パラメータを使用したデータの取得や処理を行う
    // ...
    return { postId };
  },
};

ルートへのリンク: Nuxt.jsでは、ルートへのリンクを作成するために<nuxt-link>コンポーネントを使用します。以下のように、<nuxt-link>内のto属性にパラメータを指定することで、動的なルートへのリンクを作成できます。

<nuxt-link :to="`/posts/${postId}`">記事を表示する</nuxt-link>

これで、Nuxt.jsで動的なルートとパラメータを使用する方法がわかりました。上記のコード例を参考にして、自身のプロジェクトで動的なルートを作成し、パラメータを取得して利用することができます。