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>

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年9月
 1234
567891011
12131415161718
19202122232425
2627282930