Хлебные крошки v-breadcrumbs

Компонент v-breadcrumbs в Vuetify используется для отображения навигационной цепочки страниц, позволяя пользователю видеть текущую позицию в структуре сайта и легко перемещаться между уровнями. Он полностью настраиваемый и интегрируется с Vue Router для динамической генерации путей.

Базовый синтаксис компонента выглядит следующим образом:

<v-breadcrumbs :items="items" divider="/">
</v-breadcrumbs>

Где items — это массив объектов, каждый из которых представляет отдельный элемент цепочки:

data() {
  return {
    items: [
      { text: 'Главная', href: '/' },
      { text: 'Категории', href: '/categories' },
      { text: 'Электроника', href: '/categories/electronics' },
      { text: 'Смартфоны', disabled: true }
    ]
  }
}
  • text — отображаемый текст элемента.
  • href — URL, на который ведет элемент.
  • disabled — если true, элемент не кликабельный и отображается как текущая страница.

Кастомизация разделителей

Разделитель между элементами можно задавать с помощью свойства divider. Оно поддерживает как текстовые символы, так и иконки Vuetify:

<v-breadcrumbs :items="items" divider=">"></v-breadcrumbs>
<v-breadcrumbs :items="items" divider="$mdi-chevron-right"></v-breadcrumbs>

Использование иконок через синтаксис Material Design Icons ($mdi-) позволяет создать более современный и визуально привлекательный интерфейс.

Интеграция с Vue Router

Для динамической маршрутизации удобнее использовать свойство to вместо href, что позволяет автоматически работать с Vue Router:

<v-breadcrumbs>
  <v-breadcrumbs-item :to="{ name: 'home' }">Главная</v-breadcrumbs-item>
  <v-breadcrumbs-item :to="{ name: 'categories' }">Категории</v-breadcrumbs-item>
  <v-breadcrumbs-item disabled>Смартфоны</v-breadcrumbs-item>
</v-breadcrumbs>

Использование v-breadcrumbs-item дает полный контроль над каждым элементом, включая стили, обработчики событий и атрибуты.

Вертикальные и горизонтальные хлебные крошки

По умолчанию хлебные крошки горизонтальные, но с помощью CSS можно адаптировать их под вертикальный вариант:

<v-breadcrumbs :items="items" class="vertical-breadcrumbs"></v-breadcrumbs>

<style>
.vertical-breadcrumbs {
  display: flex;
  flex-direction: column;
}
</style>

Это удобно для боковых панелей или мобильных версий сайта.

Настройка стиля и цветов

Vuetify предоставляет возможность изменять цвета через стандартные пропсы color и active-class:

<v-breadcrumbs :items="items" divider=">">
  <template v-slot:item="{ item, disabled }">
    <v-breadcrumbs-item
      :to="item.to"
      :disabled="disabled"
      color="primary"
      active-class="text--accent"
    >
      {{ item.text }}
    </v-breadcrumbs-item>
  </template>
</v-breadcrumbs>
  • color — основной цвет текста элемента.
  • active-class — класс, который применяется к текущему элементу, позволяет использовать кастомные стили Vuetify.

Слоты и расширенная кастомизация

Компонент v-breadcrumbs поддерживает несколько слотов, что дает гибкость при отображении:

  • item — кастомизация каждого элемента, можно вставлять иконки или дополнительные теги.
  • divider — кастомизация разделителя между элементами.
  • default — полный контроль над разметкой, позволяет создавать нестандартные хлебные крошки.

Пример с использованием иконок и кастомного разделителя:

<v-breadcrumbs :items="items">
  <template v-slot:divider>
    <v-icon small>mdi-chevron-right</v-icon>
  </template>
  <template v-slot:item="{ item, disabled }">
    <v-breadcrumbs-item :to="item.to" :disabled="disabled">
      <v-icon left small>mdi-folder</v-icon>
      {{ item.text }}
    </v-breadcrumbs-item>
  </template>
</v-breadcrumbs>

Динамическое обновление хлебных крошек

Использование реактивного массива items позволяет автоматически обновлять цепочку при изменении маршрутов или состояния приложения. Например, при переходе на страницу категории:

watch: {
  '$route'(to) {
    this.updateBreadcrumbs(to)
  }
},
methods: {
  updateBreadcrumbs(route) {
    this.items = [
      { text: 'Главная', to: { name: 'home' } },
      { text: route.meta.category, to: { name: 'categories' } },
      { text: route.name, disabled: true }
    ]
  }
}

Такой подход обеспечивает полную синхронизацию хлебных крошек с маршрутизатором и бизнес-логикой приложения.

Поддержка адаптивности

Для мобильных устройств можно скрывать часть элементов и отображать их через выпадающее меню:

<v-breadcrumbs :items="items" class="d-none d-md-flex"></v-breadcrumbs>
<v-menu class="d-flex d-md-none">
  <template v-slot:activator="{ on, attrs }">
    <v-btn v-bind="attrs" v-on="on">Меню</v-btn>
  </template>
  <v-list>
    <v-list-item v-for="item in items" :key="item.text" :to="item.to">
      {{ item.text }}
    </v-list-item>
  </v-list>
</v-menu>

Использование утилит Vuetify для отображения элементов по breakpoint позволяет обеспечить удобство навигации на любых устройствах.

Заключение по функциональности

v-breadcrumbs — универсальный компонент для построения навигации, который поддерживает статические и динамические маршруты, кастомные разделители, цвета, иконки и слоты. Реактивность и интеграция с Vue Router делают его незаменимым инструментом для создания сложных интерфейсов с понятной навигационной структурой.

Оглавление