Vue.jsのSPAでVuetifyのパンくずリストを実装する

SPAで画面毎urlが変わる場合のパンくずリストをVuetifyのBreadcrumbsコンポーネントを使用して表示させます。

Vue.jsではパンくずを表示するプラグインでvue-breadcrumbs、vue-2-breadcrumbsなどがあるようです。今回は_vue-2-breadcrumbs_を選択します。
_vue-2-breadcrumbs_を選択した理由は、vue-routerで画面の親子関係を設定しやすかったからです。

環境

• Vue.js 2.5.17
• Vuetify 2.4.3
• vue-router 3.5.1
• vue-2-breadcrumbs 0.7.12

実装方法

SPAでurlを変更させるためvue-routerを使用しますが、meta属性のbreadcrumbプロパティを設定します。
オブジェクトを設定した場合labelが表示名で、parentが親画面名です。parentには親のname属性を設定します。String型をセットした場合、labelに適用されます。
この設定で「ラビットハウス / 香風智乃」「ラビットハウス / 香風タカヒロ」という関係になります。

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = {
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Rabbithouse',
            component: RabbithouseComponent,
            meta: {
                breadcrumb: 'ラビットハウス',
            },
        },
        {
            path: '/charactor/chino',
            name: 'chino',
            component: KafuChinoComponent,
            meta: {
                breadcrumb:
                {
                    label: '香風智乃',
                    parent: 'Rabbithouse'
                }
            },
        },
        {
            path: '/charactor/takahiro',
            name: 'takahiro',
            component: KafuTakahiroComponent,
            meta: {
                breadcrumb:
                {
                    label: '香風タカヒロ',
                    parent: 'Rabbithouse'
                }
            },
        },
    ]
};

export default new VueRouter(router);

私の場合、App.jsとファイルを分けています。分けない場合は、App.jsに記述してください。vue-2-breadcrumbsをuseする時に、templateとcomputedをオプションで追加します。
Vuetifyではv-breadcrumbタグのitemsに画面情報のオブジェクトの配列をセットします。パンくずのデータはthis.$breadcrumbsに入っているのでv-breadcrumbタグの仕様に合わせた配列に作り直してセットします。

breadcrumb.js

import Vue from 'vue';
import VueBreadcrumbs from 'vue-2-breadcrumbs'

Vue.use(VueBreadcrumbs, {
    template:
        `<div>
          <v-breadcrumbs class='breadcrumb-item active' :items="items" />
        </div>`,
    computed: {
        items() {
            return this.$breadcrumbs.map((crumb, i) => {
                return {
                    text: this.getBreadcrumb(crumb.meta.breadcrumb),
                    disabled: this.$breadcrumbs.length - 1 === i,
                    to: this.getPath(crumb)
                };
            });
        }
    }
});

export default VueBreadcrumbs;

App.js

import breadcrumb from "./breadcrumb";

const app = new Vue({
    el: '#app',
    router: router,
    vuetify: vuetify,
    breadcrumb: breadcrumb,
});