Ссылка

Используйте пользовательский компонент BootstrapVue b-link для создания стандартной ссылки <a> или <router-link>. <b-link> поддерживает состояние disabled и распространение события click.

<b-link> это строительный блок для большинства компонентов BootstrapVue, предлагающих функциональность ссылок.

<div>
  <b-link href="#foo">Ссылка</b-link>
</div>

<!-- b-link.vue -->

Тип ссылки

Указав значение в свойстве href, будет отображаться стандартный элемент ссылки (<a>). Чтобы вместо этого сгенерировать <router-link>, укажите местоположение маршрута через свойство to.

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

Если ваше приложение работает под управлением Nuxt.js, компонент <nuxt-link> будет использоваться вместо <router-link>. Компонент <nuxt-link> поддерживает все те же функции, что и <router-link> (поскольку это компонент-оболочка для <router-link>) и многое другое.

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

BootstrapVue автоматически определяет использование компонентов ссылки <router-link> и <nuxt-link>. Некоторые сторонние платформы также предоставляют настраиваемые версии <router-link>, такие как компонент <g-link> от Gridsome. <b-link> может поддерживать эти сторонние совместимые компоненты <router-link> с помощью свойства router-component-name. Все свойства vue-router (за исключением конкретных свойств <nuxt-link>) будут переданы указанному компоненту ссылки на маршрутизатор.

Обратите внимание, что сторонний компонент будет использоваться только в том случае, если установлен параметр to.

Ссылки с `href="#"`

Обычно <a href="#"> вызывает прокрутку документа вверх страницы при нажатии. <b-link> решает эту проблему, предотвращая действие по умолчанию (прокрутка вверх), когда для href установлено значение #.

Если вам нужно прокрутить страницу вверх, используйте стандартный тег <a href="#">...</a>.

Состояние ссылка отключена

Отключите функциональность ссылки, установив свойство disabled в значение true.

<div>
  <b-link href="#foo" disabled>Отключенная ссылка</b-link>
</div>

<!-- b-link-disabled.vue -->

Отключение ссылки установит класс Bootstrap v4 .disabled для ссылки, а также остановит распространение событий, предотвратит выполнение действия по умолчанию и удалит ссылку из последовательности вкладок документа (tabindex="-1").

Примечание: Bootstrap v4 CSS в настоящее время стилизует отключенные ссылки не иначе, чем обычные ссылки. Вы можете использовать следующий пользовательский CSS для стилизации отключенных ссылок (предотвратив изменение стиля при наведении):

a.disabled {
  pointer-events: none;
}

Not all browsers support pointer-events: none;.

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

`<b-link>`

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

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

Свойства

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

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`active`	`Boolean`	`false`	При значении `true` переводит компонент в активное состояние с активным стилем.
`active-class`	`String`		<router-link> свойство: Настройка активного класса CSS, применяемого, когда ссылка активна. Обычно Вам нужно установить это имя класса 'active'
`append`	`Boolean`	`false`	<router-link> свойство: Настройка добавления свойства всегда добавляет относительный путь к текущему пути
`disabled`	`Boolean`	`false`	Если установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
`event`	`Array` или `String`		<router-link> свойство: Указывает событие, которое запускает ссылку. В большинстве случаев вы должны оставить это значение по умолчанию
`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`		Обозначает целевой URL ссылки для стандартных ссылок
`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`	Устанавливает атрибут '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>`)
`router-tag`	`String`		<router-link> свойство: Указывает, какой тег отображать, и он все равно будет прослушивать события щелчка для навигации. `router-tag` переводится в свойство тега в окончательном отрисованном `<router-link>`. Обычно следует использовать значение по умолчанию
`target`	`String`	`'_self'`	Устанавливает атрибут 'target' отображаемой ссылки
`to`	`Object` или `String`		<router-link> свойство: Обозначает целевой маршрут ссылки. При нажатии значение свойства будет передано в `router.push()` внутренне, поэтому значение может быть либо строкой, либо объектом дескриптора местоположения

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

Слоты

Наименование	Описание
`default`	Контент для размещения в ссылке

События

Событие	Аргументы	Описание
`bv::link::clicked`	Нативное событие клика	Генерируется на `$root` при нажатии на ссылку
`click`	Нативное событие клика	Генерируется при нажатии на ссылку

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

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

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

Пример:

import { BLink } from 'bootstrap-vue'
Vue.component('b-link', BLink)

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

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

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