Vue.jsでパンくずリスト(手動でページ設定)

はじめに

Vue.jsでパンくずリストを実装すべく調べながら進めたので、メモ書きとして残しておきます。
自動でリストを作成する内容ではありませんので、よろしくお願いします。

仕様について

TOPページから一覧ページを挟んでとあるページに遷移します。

実装

呼び出し側の中身

Example.vue

<div>
    <BreadCrumb :breadcrumbs="breadcrumbs"/>
</div>

<script>

import BreadCrumb from "/components/BreadCrumb";

export default {
  components: {
    BreadCrumb
  },
  data () {
    return {
      breadcrumbs: [
       {
          name: 'TOP',
          path: '/'
        },
        {
          name: 'Category', // 中間ページ
          path: '/category',
        },
        {
          name: 'ExamplePage' // とあるページ
        }
      ]
    }
};
<script>

パンくずリストのコンポーネント中身

BreadCrumb.vue

<div class="breadcrumb-area">
    <div class="breadcrumb-item">
      <div v-for="v in breadcrumbs">
        <div v-if="v.path">
          <router-link :to="v.path">
            <span class="link">{{v.name}}</span>
          </router-link>
          <span class="space">></span>
        </div>
        <div v-else>
          {{v.name}}
        </div>
      </div>
    </div>
  </div>

解説

例として最後のとあるページで記載しています。
子コンポーネントに渡すデータにそのページまでのnameとpathをdataに配列型に持たせることで、パンくずが増えていくイメージです。
とあるページでは、nameは保持させますが、pathを保持させないことで、v-ifを使ってリンクかただの文字を表示させるかを切り分けています。

↓こんな感じ

最後に

手動でページ設定をする方法でパンくずリストを作成してみました。
ちなみに、自動でページ毎に設定をさせる方法もあるみたいですので、大量のページに使う方などはそちらを参考にして頂いた方がいいかもしれません。

https://hirakublog.com/code/218/
参考にさせていただきました。ありがとうございます。