Хлебные крошки

Укажите местоположение текущей страницы в навигационной иерархии. Разделители автоматически добавляются в CSS через ::before и content.

Обзор

<template>
  <b-breadcrumb :items="items"></b-breadcrumb>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          {
            text: 'Админ',
            href: '#'
          },
          {
            text: 'Управление',
            href: '#'
          },
          {
            text: 'Библиотека',
            active: true
          }
        ]
      }
    }
  }
</script>

<!-- b-breadcrumb.vue -->

Элементы хлебных крошек

Элементы визуализируются с помощью свойства :items. Это может быть массив объектов для предоставления ссылки и активного состояния. Ссылки могут быть href для тегов привязки или to для ссылок маршрутизатора. Хлебные крошки работают в предположении, что в каждом наборе упорядоченных хлебных крошек есть одна активная ссылка, поэтому активное состояние последнего элемента автоматически устанавливается на false.

const items = [
  {
    text: 'Главная',
    href: 'https://google.com'
  },
  {
    text: 'Посты',
    to: { name: 'home' }
  },
  {
    text: 'Другая история',
    active: true
  }
]

Смотрите справочную страницу Поддержка маршрутизатора для получения информации о конкретных свойствах связи маршрутизатора.

Элементы, размещенные вручную

Вы также можете вручную поместить отдельные дочерние компоненты <b-breadcrumb-item> в слот по умолчанию компонента <b-breadcrumb> в качестве альтернативы использованию свойства items для большего контроля над содержимым каждого элемента:

<template>
  <b-breadcrumb>
    <b-breadcrumb-item href="#home">
      <b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon>
      Главная
    </b-breadcrumb-item>
    <b-breadcrumb-item href="#foo">Фуу</b-breadcrumb-item>
    <b-breadcrumb-item href="#bar">Бар</b-breadcrumb-item>
    <b-breadcrumb-item active>Баз</b-breadcrumb-item>
  </b-breadcrumb>
</template>

<!-- b-breadcrumb-item.vue -->

Не забудьте установить свойство active для последнего элемента.

<b-breadcrumb-item> также поддерживает различные свойства <router-link>, такие как to и т. д.

Справочник по компонентам

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство
Тип
По умолчанию
Описание
items
ArrayМассив элементов навигации для рендеринга

Слоты

Наименование
Описание
default Контент (элементы хлебных крошек) для размещения в навигационной крошке

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство
(Click to sort ascending)
Тип
(Click to sort ascending)
По умолчанию
Описание
active
BooleanfalseПри значении `true` переводит компонент в активное состояние с активным стилем.
active-class
String<router-link> свойство: Настройка активного класса CSS, применяемого, когда ссылка активна. Обычно Вам нужно установить это имя класса 'active'
append
Booleanfalse<router-link> свойство: Настройка добавления свойства всегда добавляет относительный путь к текущему пути
aria-current
String'location'Устанавливает значение атрибута 'aria-current' (когда элемент является активным элементом). Поддерживаемые строковые значения: 'location', 'page' или 'true'
disabled
BooleanfalseЕсли установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
exact
Booleanfalse<router-link> свойство: Поведение сопоставления активного класса по умолчанию включает сопоставление. Установка этого свойства заставляет режим точно соответствовать маршруту
exact-active-class
String<router-link> свойство: Настройка активного класса CSS, применяемого, когда ссылка активна с точным соответствием. Обычно Вам нужно установить это имя класса 'active'
exact-path
Booleanfalse<router-link> prop: Allows matching only using the path section of the url, effectively ignoring the query and the hash sections
exact-path-active-class
String<router-link> prop: Configure the active CSS class applied when the link is active with exact path match. Typically you will want to set this to class name 'active'
href
String<b-link> свойство: Обозначает целевой URL-адрес ссылки для стандартных ссылок
html
Использовать с осторожностью
StringHTML-строка для отображения в элементе хлебной крошки
no-prefetch
Booleanfalse<nuxt-link> свойство: Чтобы улучшить отзывчивость Ваших приложений Nuxt.js, когда ссылка будет отображаться в области просмотра, Nuxt.js автоматически выполнит предварительную загрузку страницы с разделением кода. Установка `no-prefetch` отключит эту функцию для конкретной ссылки
prefetch
v2.15.0+
Booleannull<nuxt-link> свойство: Чтобы улучшить отзывчивость Ваших приложений Nuxt.js, когда ссылка будет отображаться в области просмотра, Nuxt.js автоматически выполнит предварительную загрузку страницы с разделением кода. Установка для `prefetch` значения `true` или `false` перезапишет значение по умолчанию `router.prefetchLinks`
rel
Stringnull<b-link> свойство: Устанавливает атрибут `rel` для отображаемой ссылки
replace
Booleanfalse<router-link> свойство: Установка свойства `replace` будет вызывать `router.replace()` вместо `router.push()` при нажатии, поэтому навигация не будет оставлять запись в истории
router-component-name
v2.15.0+
String<b-link> свойство: BootstrapVue автоматически определяет между `<router-link>` и `<nuxt-link>`. В случаях, когда Вы хотите использовать сторонний компонент ссылки на основе `<router-link>`, установите это свойство на имя компонента, например установите для него значение 'g-link', если Вы используете Gridsome (обратите внимание, что компоненту передаются только определенные свойства `<router-link>`)
target
String'_self'<b-link> свойство: Устанавливает атрибут `target` для отображаемой ссылки
text
StringТекст для отображения в элементе навигации
to
Object или String<router-link> свойство: Обозначает целевой маршрут ссылки. При нажатии значение свойства будет передано в `router.push()` внутренне, поэтому значение может быть либо строкой, либо объектом дескриптора местоположения

<b-breadcrumb-item> поддерживает генерацию <router-link> или <nuxt-link> компонент (при использовании Nuxt.js). Дополнительные сведения о свойствах, связанных с ссылками на маршрутизаторы (или Nuxt Link), смотрите в разделе справки по поддержке роутов.

Осторожно: Свойства, поддерживающие HTML-строки (*-html) может быть уязвим для Атаки межсайтового скриптинга (XSS) при передаче необработанных значений, предоставленных пользователем. Вы должны правильно очищать ввод пользователя!

Слоты

Наименование
Описание
default Контент для размещения в элементе навигации

События

Событие
Аргументы
Описание
click
  1. event - Нативный объект события клика
Генерируется при нажатии

Импорт отдельных компонентов

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

Компонент
Именованный экспорт
Путь импорта
<b-breadcrumb>BBreadcrumbbootstrap-vue
<b-breadcrumb-item>BBreadcrumbItembootstrap-vue

Пример:

import { BBreadcrumb } from 'bootstrap-vue'
Vue.component('b-breadcrumb', BBreadcrumb)

Импортировать как плагин Vue.js

Этот плагин включает в себя все перечисленные выше отдельные компоненты. Плагины также включают псевдонимы любых компонентов.

Именованный экспорт
Путь импорта
BreadcrumbPluginbootstrap-vue

Пример:

import { BreadcrumbPlugin } from 'bootstrap-vue'
Vue.use(BreadcrumbPlugin)