9割以上が知らない！？初心者におススメ！Vue.jsでパンくずリストを作ろう！！

8540 ワード
SEO Buefy Vue.js 初心者 パンくずリスト 初心者 テキストリンク

皆さんこんにちは！

今回は初心者さんに必見！パンくずリストの作り方をお教えします！！

HTML、CSSではなくコンポーネントを利用して作成していきます。

パンくずリストはSEO内部対策にも非常に有効で、コンポーネントを使うことでその都度HTML、CSSを記述しなくて済むのでぜひご利用ください！

また、今回の記事を書くにあたって、下記の記事を参考にさせて頂きました。

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

ご協力誠にありがとうございます。

それでは、順を追って一緒に説明を見ていきましょう！

コンポーネントの作成

componentsディレクトリにBreadcrumb.vueを作成し、以下のテンプレートを作成します。

components/Breadcrumb.vue
<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 }}
            <b-icon pack="fas" icon="chevron-right" class="bread-icon"></b-icon>
          </a>
          <span v-else class="l-breadcrumb__text">{{ breadcrumb.name }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ['breadcrumbs']
}
</script>

<style scoped>
.l-breadcrumb__items li {
  display: inline-block;
  margin-top: 1rem;
}
.l-breadcrumb__items a {
  color: var(--link-color) !important;
}
.l-breadcrumb__items a:hover {
  text-decoration: underline !important;
}
.l-breadcrumb__items .bread-icon {
  margin: 0 5px;
  color: black;
  opacity: 0.5;
  display: inline;
}
</style>

<b-icon>はCSSフレームワークBuefyを使うことで、実装できます。詳しくは、僕が書いたこちらの記事を見て下さい。
初心者必見！サイト制作は楽してなんぼ。CSSフレームワークBuefyの紹介！！
効率的にサイト作り！Buefyでアイコンを表示しよう！！

また、パンくずリストのCSSも載せておくので、ぜひ使ってください！

コンポーネントの読み込み

コンポーネントを読み込み、propsでnameとpathと言う名のプロパティを用いて、オブジェクト作成します。

App.vue
<breadcrumb :breadcrumbs="breadcrumbs" />

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

export default {
  computed: {
    breadcrumbs: function() {
      return {
        data: [
          {
            name: 'ホーム',
            path: '/'
          },
          {
            name: 'ユーザー情報',
            path: '/user'
          },
          {
            name: 'アカウント情報'
          }
        ]
      }
    }
  }
}
</script>

すると、以下のような結果になります。

いかがだったでしょうか？

パンくずリストはUXの部分でも非常に有効なので、僕は使えるなら使った方がいいかなと思います。

今使わなくても、いずれは使うときが必ず来るので、その時は今回書いた記事をぜひ参考にして使ってください！！

以上、「9割以上が知らない！？初心者におススメ！Vue.jsでパンくずリストを作ろう！！」でした！

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading