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

Укажите местоположение текущей страницы в навигационной иерархии. Разделители автоматически добавляются в 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 и т. д.

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

Функциональный компонент

Смотреть источник

<b-breadcrumb> Свойства
<b-breadcrumb> Слоты

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

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

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

Функциональный компонент

Смотреть источник

<b-breadcrumb-item> Свойства
<b-breadcrumb-item> Слоты
<b-breadcrumb-item> События

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

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`active`	`Boolean`	`false`	При значении `true` переводит компонент в активное состояние с активным стилем.
`active-class`	`String`		<router-link> свойство: Настройка активного класса CSS, применяемого, когда ссылка активна. Обычно Вам нужно установить это имя класса 'active'
`append`	`Boolean`	`false`	<router-link> свойство: Настройка добавления свойства всегда добавляет относительный путь к текущему пути
`aria-current`	`String`	`'location'`	Устанавливает значение атрибута 'aria-current' (когда элемент является активным элементом). Поддерживаемые строковые значения: 'location', 'page' или 'true'
`disabled`	`Boolean`	`false`	Если установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
`exact`	`Boolean`	`false`	<router-link> свойство: Поведение сопоставления активного класса по умолчанию включает сопоставление. Установка этого свойства заставляет режим точно соответствовать маршруту
`exact-active-class`	`String`		<router-link> свойство: Настройка активного класса CSS, применяемого, когда ссылка активна с точным соответствием. Обычно Вам нужно установить это имя класса 'active'
`exact-path`	`Boolean`	`false`	<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` Использовать с осторожностью	`String`		HTML-строка для отображения в элементе хлебной крошки
`no-prefetch`	`Boolean`	`false`	<nuxt-link> свойство: Чтобы улучшить отзывчивость Ваших приложений Nuxt.js, когда ссылка будет отображаться в области просмотра, Nuxt.js автоматически выполнит предварительную загрузку страницы с разделением кода. Установка `no-prefetch` отключит эту функцию для конкретной ссылки
`prefetch` v2.15.0+	`Boolean`	`null`	<nuxt-link> свойство: Чтобы улучшить отзывчивость Ваших приложений Nuxt.js, когда ссылка будет отображаться в области просмотра, Nuxt.js автоматически выполнит предварительную загрузку страницы с разделением кода. Установка для `prefetch` значения `true` или `false` перезапишет значение по умолчанию `router.prefetchLinks`
`rel`	`String`	`null`	<b-link> свойство: Устанавливает атрибут `rel` для отображаемой ссылки
`replace`	`Boolean`	`false`	<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`	`event` - Нативный объект события клика	Генерируется при нажатии

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

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

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

Пример:

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

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

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

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