QBreadcrumbs хлебные крошки

QBreadcrumbs — это компонент библиотеки Quasar Framework, предназначенный для отображения навигационных цепочек, известных как «хлебные крошки». Они помогают пользователю ориентироваться в структуре приложения и быстро возвращаться к предыдущим уровням. Компонент тесно интегрирован с Vue.js и поддерживает реактивность через привязку данных.

Ключевые свойства компонента:

  • :value — массив объектов, представляющих элементы хлебных крошек. Каждый объект содержит как минимум поле label и опционально icon и to.
  • separator — строка или HTML, определяющая разделитель между элементами.
  • dense — делает компонент более компактным.
  • align — выравнивание хлебных крошек: left, center или right.

Простейший пример использования:

<q-breadcrumbs :value="breadcrumbs" separator="/">
</q-breadcrumbs>

<script>
export default {
  data() {
    return {
      breadcrumbs: [
        { label: 'Главная', to: '/' },
        { label: 'Каталог', to: '/catalog' },
        { label: 'Товары', to: '/catalog/products' }
      ]
    }
  }
}
</script>

Настройка элементов хлебных крошек

Каждый элемент массива value может содержать следующие поля:

  • label (обязательное) — текст элемента.
  • icon — иконка из библиотеки Quasar (например, home).
  • to — маршрут для навигации, поддерживает объекты Vue Router.
  • exact — если установлено true, навигация срабатывает только при точном совпадении пути.
  • disable — делает элемент некликабельным, используется для текущей страницы.

Пример с иконками и отключённым элементом:

<q-breadcrumbs :value="breadcrumbs" separator=">">
</q-breadcrumbs>

<script>
export default {
  data() {
    return {
      breadcrumbs: [
        { label: 'Главная', icon: 'home', to: '/' },
        { label: 'Каталог', icon: 'list', to: '/catalog' },
        { label: 'Товары', disable: true }
      ]
    }
  }
}
</script>

Использование слотов для полной кастомизации

Компонент QBreadcrumbs поддерживает слоты, что позволяет полностью контролировать внешний вид каждого элемента:

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

Пример с кастомным элементом:

<q-breadcrumbs :value="breadcrumbs">
  <template v-slot:item="props">
    <q-btn
      flat
      round
      dense
      :label="props.item.label"
      @click="goTo(props.item.to)"
    />
  </template>
  <template v-slot:separator>
    <span style="margin: 0 4px;">→</span>
  </template>
</q-breadcrumbs>

В этом примере каждый элемент рендерится как кнопка QBtn, а разделитель заменён на стрелку с отступами.

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

Одним из преимуществ QBreadcrumbs является возможность интеграции с Vue Router. Для этого используется поле to, которое может содержать строку пути или объект маршрута:

{
  path: '/catalog/products',
  name: 'products'
}

Если указано поле to, компонент автоматически создаёт ссылку с помощью QRouteTab или стандартного тега <a> при использовании router-link.

Пример навигации с объектом маршрута:

breadcrumbs: [
  { label: 'Главная', to: { name: 'home' } },
  { label: 'Каталог', to: { name: 'catalog' } },
  { label: 'Товары', disable: true }
]

Визуальные модификаторы

Quasar позволяет настраивать внешний вид хлебных крошек через модификаторы:

  • dense — уменьшенный размер.
  • rounded — скруглённые углы, если элементы обёрнуты в кнопки.
  • color и text-color — цвет текста и фона.
  • separator — можно задавать не только строку, но и компонент, например, иконку QIcon.

Пример с цветами:

<q-breadcrumbs :value="breadcrumbs" separator="/">
</q-breadcrumbs>

<script>
export default {
  data() {
    return {
      breadcrumbs: [
        { label: 'Главная', color: 'primary', to: '/' },
        { label: 'Каталог', color: 'secondary', to: '/catalog' },
        { label: 'Товары', color: 'grey-7', disable: true }
      ]
    }
  }
}
</script>

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

QBreadcrumbs хорошо работает с реактивными данными. Хлебные крошки можно формировать на основе текущего маршрута или состояния приложения:

computed: {
  breadcrumbs() {
    const pathArray = this.$route.path.split('/').filter(p => p)
    return pathArray.map((p, index) => ({
      label: p.charAt(0).toUpperCase() + p.slice(1),
      to: '/' + pathArray.slice(0, index + 1).join('/')
    }))
  }
}

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

Адаптивность и мобильные устройства

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

  • dense для уменьшения высоты.
  • scrollable container с overflow-x: auto, если элементов много.
  • Кастомные слоты с иконками вместо текста, чтобы экономить место.

QBreadcrumbs предоставляет гибкий инструмент для создания интуитивно понятной навигации, поддерживает кастомизацию через слоты, динамическое формирование и интеграцию с Vue Router. Правильное использование всех этих возможностей позволяет создавать профессиональные интерфейсы с удобной структурой и визуальной ясностью.

Оглавление