Nuxt.jsで動的なページを作成する

Nuxt.jsで動的なページを作成する方法を試してみます。

サンプルコード

動的なページを作りたい場合、vueファイル名の先頭かディレクトリ名の先頭に「_」を付けます。
例として、pagesディレクトリ内に「_slug.vue」というファイルを作成して、以下の内容にしてみます。

<template>
  <h1>{{ this.slug }}のページです。</h1>
</template>

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

この場合、contextのparams.slugで値を取得できます。
例えば「/123」でアクセスした場合、ブラウザでは以下のように表示されます。

<h1>123のページです。</h1>

次にディレクトリ名の場合も試してみます。
pagesディレクトリ内に「/category」フォルダを作成して、その中に「_slug.vue」というファイルを作成して内容を以下にします。

<template>
  <h1>{{ this.category }} / {{ this.slug }}のページです。</h1>
</template>

<script>
  export default {
    async asyncData({ params }) {
      const category = params.category
      const slug = params.slug
      return { category, slug }
    }
  }
</script>

最初の例と同じく、params.categoryやparams.slugでディレクトリ名とファイル名を取得できます。
「/css/123」でアクセスした場合は以下のようになります。

<h1>css / 123のページです。</h1>