"Хлебные крошки" на VueJS (vue-2-breadcrumbs)

Vue-2-breadcrumbs построены на базе официального плагина vue-router для создания простых "хлебных крошек"

Демо: GitHub

Поддержка

• Поддержка SSR
• Установка родительского маршрута без необходимости фактически вложить его в дочерний массив
• Кастомизированный шаблон
• Динамические "хлебные крошки"
• Динамический родитель
• Динамический заголовок
• Сокращенный заголовок (breadcrumb: 'Заголовок страницы')
• Суб-роутинг

Установка

npm install vue-2-breadcrumbs

Примечание: Этот компонент совестим с NodeJS v10+

Использование

import Vue from 'vue';
import VueBreadcrumbs from 'vue-2-breadcrumbs';
import App from './App.vue';

Vue.use(VueBreadcrumbs);

Примечание: После этого компонент <Breadcrumbs/> будет в вашем распоряжении

Мета во Vue Router

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

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Главная',
      component: { template: '<h2>Главная</h2>' },
      meta: {
        breadcrumb: 'Главная'
      }
    },
    {
      path: '/params',
      name: 'Параметры',
      component: { template: '<h2>Параметры</h2>' },
      meta: {
        breadcrumb: routeParams => `route params id: ${routeParams.id}`
      }
    },
    {
      path: '/context',
      name: 'Контекст',
      component: { template: '<h2>Контекст</h2>' },
      meta: {
        breadcrumb() {
            const { name } = this.$route;
            return `Имя "${name}" рута контекста`;
        }
      }
    },
    {
      path: '/parent',
      component: { template: '<router-view/>' },
      meta: {
        breadcrumb: {
          label: 'Родитель для параметров',
          parent: 'Параметры'
        }
      },
      {
        name: 'dynamic-parent',
        path: '/dynamic-parent',
        component: { template: '<h2>Динамический родитель</h2>' },
        meta: {
          breadcrumb() {
            const { name } = this.$route;

            return {
              label: name,
              parent: 'settings'
            };
          }
        }
    }
  ]
});

Опции

Объект options также может быть передан в плагин для указания вашего собственного шаблона и методов рендеринга при желании. Например:

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

Vue.use(VueBreadcrumbs, {
  template:
    '        <nav v-if="$breadcrumbs.length" aria-label="breadcrumb">\n' +
    '            <ol class="breadcrumb">\n' +
    '                <li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">\n' +
    '                    <router-link :to="{ path: getPath(crumb) }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>' +
    '                </li>\n' +
    '            </ol>\n' +
    '        </nav>'
});

_________________________

Оригинал на Github (автор компонента - Scrum(Иван Демидов))