【vue.js】nuxt.jsでパンくずリストを作る方法

nuxt.js（vue.js）でパンくずリストを作る方法

コンポーネントを作成します

<template>
  <div class="l-breadcrumb">
    <div class="l-breadcrumb__inner">
      <ul class="l-breadcrumb__items">
        <li class="l-breadcrumb__item" v-for="breadcrumb in breadcrumbs.data" :key="breadcrumb.name">
          <a v-if="breadcrumb.path" :href="breadcrumb.path" class="l-breadcrumb__text">{{ breadcrumb.name }}</a>
          <span v-else class="l-breadcrumb__text">{{ breadcrumb.name }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    breadcrumbs: Object
  }
}
</script>

作成したコンポーネントを読み込みます

<breadcrumb :breadcrumbs="breadcrumbs" />

<script>
import Breadcrumb from '~/components/Breadcrumb.vue'

export default {
  computed: {
    breadcrumbs: function() {
      return {
        data: [
          {
            name: 'トップページ',
            path: '/'
          },
          {
            name: 'カテゴリー名',
            path: '/category/'
          },
          {
            name: '記事タイトルです'
          }
        ]
      }
    }
  }
}
</script>

実行結果

以下のようになります

※当ブログのパンくずです。

解説

表示用のnameとリンク用のpathを持つオブジェクトをpropsでbreadcrumbコンポーネントに渡します。

渡されたデータの数だけv-forでループして表示します。

pathが無いデータはv-ifで分岐してリンクしないhtmlが生成されます。

apiから取得したデータなどを組み込むことで動的になります

当ブログはwp rest apiから取得し以下のように設定しています。

<breadcrumb :breadcrumbs="breadcrumbs" />

<script>
import Breadcrumb from '~/components/Breadcrumb.vue'

export default {
  computed: {
    breadcrumbs: function() {
      return {
        data: [
          {
            name: 'トップページ',
            path: '/'
          },
          {
            name: this.item.channel[0].name,
            path: '/' + this.item.channel[0].slug
          },
          {
            name: this.item.title.rendered
          }
        ]
      }
    }
  }
}
</script>

※このコード当ブログのものの例なのでコピペしても動きません

実行結果

まとめ

各テンプレートごとにオブジェクトを定義する必要がありますが、色々な条件に対応しやすいと思います。

やはりvue.jsはビューのソースコードが汚れにくいことがいいですよね！！