Nuxt.jsで自動生成したディレクトリ名にアクセスする方法(動的ルートへのアクセス)

今回はフレームワークに慣れてたり公式を熟読した人には無用な内容かもですが、僕自身が調べるのに手間取ったのでメモとして残しておきます。

動的に自動生成するページの固有IDをvueファイル側で使いたい

API等を元にページを生成する際には下記のようなディレクトリ構成でファイル名に「_」を付けることが多いです。

pages
 - posts
   - _id.vue

で、データの数だけposts/配下にディレクトリが作られるわけです。こんな感じに。generateした方がわかりやすいかもです。

posts
 - 101/index.html
 - 102/index.html
 - 103/index.html

この時「101」の部分をvueファイル内で使いたい場合は、asyncDataメソッド内で「params」プロパティにアクセスします。

export default {
  async asyncData ({ params }) {
    const id = params.id //プロパティ名は「_」付けたファイル名になります
    return {id}
  }
}

あとはここで取得した値を必要に応じて呼び出していくだけです。
WP REST API等でページごとに固有の情報を呼び出したい場合は、nuxt.config.jsに記述したroutesのでidを指定し、それをキーにvueファイル側で情報を取得していくと良いんじゃないかと思います。

nuxt.config.jsの方での取得の仕方はこちらの記事にメモしておきました。
WP REST APIを元にNuxt.jsのgenerateで記事ページを自動生成してみる(いわゆる動的ルーティング)

ちなみにこの固有のidへアクセスする方法はこちらの公式に書いてあります。
ただ僕が難しかったのが公式に書いてある「動的なルートデータへのアクセス」という呼び方がわからなかったからです。

こういうのはフレームワークを使い慣れてくればわかるようになってくるんでしょうか。

Nuxt.jsビギナーズガイド