链接(Links)

使用BootstrapVue的自定义b-link组件生成标准的<a>链接或 <router-link><b-link> 支持disabled状态并click事件传播。

<b-link>是大多数提供链接功能的BootstrapVue组件的构建块。

<div>
  <b-link href="#foo">Link</b-link>
</div>

通过在href属性中指定一个值,将呈现一个标准链接(<a>)元素。 要生成<router-link>,请通过to属性指定路由位置。

路由器链接支持各种附加属性。有关详细信息,请参阅路由器支持参考部分。

如果您的应用程序在Nuxt.js下运行, 则将使用<nuxt-link>组件 而不是<router-link><nuxt-link>组件 支持与<router-link>相同的所有功能(因为它是<router-link>的包装组件)等等。

通常,单击<a href="#">会使文档滚动到页面顶部。 <b-link>通过在href设置 为#时阻止默认操作(滚动到顶部)来解决此问题。

如果需要滚动到顶级行为,请使用标准的<a href="#">...</a>标签。

通过将disabled的属性设置为true来禁用链接功能。

<div>
  <b-link href="#foo" disabled>Disabled Link</b-link>
</div>

禁用链接将在链接上设置Bootstrap v4 .disabled类, 并处理停止事件传播、防止发生默认操作以及从文档选项卡序列中删除链接(tabindex="-1")。

注意:Bootstrap v4 CSS当前的禁用链接样式与非禁用链接样式不同。您可以使用以下自定义CSS设置禁用链接的样式(通过阻止悬停样式更改):

a.disabled {
  pointer-events: none;
}

并非所有浏览器都支持pointer-events: none;.

组件引用

属性 (Click to sort Ascending) 类型 默认值 描述
href String 表示标准a链接的链接的目标URL
rel String 设置呈现链接的“rel”属性
target String '_self' 设置呈现链接的“target”属性
active Boolean false 当设置为“true”时,使用活动样式将组件置于活动状态
disabled Boolean false 当设置为“true”时,将禁用组件的功能并将其置于禁用状态
to String or Object 路由器链接属性:表示链接的目标路由。单击时,to prop的值将在内部传递给router.push(),因此该值可以是字符串或位置描述符对象
append Boolean false 路由器链接属性:设置附加属性总是将相对路径附加到当前路径
replace Boolean false 路由器链接属性:设置替换属性将在单击时调用“router.replace()”,而不是“router.push()”,因此导航不会留下历史记录
event String or Array 'click' 路由器链接属性:指定触发链接的事件。在大多数情况下,您应该将其保留为默认值
active-class String 路由器链接属性:配置当链接处于活动状态时应用的活动CSS类。通常您需要将其设置为类名“active”
exact Boolean false 路由器链接属性:默认的活动类匹配行为是包含匹配。设置此属性将强制模式与路线完全匹配
exact-active-class String 路由器链接属性:配置当链接处于活动状态时应用的活动CSS类,精确匹配。通常您需要将其设置为类名“active”
router-tag String 'a' 路由器链接属性:指定要呈现的标记,它仍将侦听用于导航的单击事件“路由器标记”转换为最终呈现路由器链接上的标记属性。通常应该使用默认值
no-prefetch Boolean false nuxt link prop:为了提高nuxt.js应用程序的响应性,当链接显示在视区内时,nuxt.js将自动预取被拆分的代码页。设置“无预取”将禁用特定链接的此功能

<b-link> 支持生成<router-link><nuxt-link>组件(如果使用nuxt.js)。 有关路由器链接(或nuxt链接)特定属性的更多详细信息,请参阅路由器支持参考部分。

事件 参数 说明
click
  1. Native click event
单击链接时

导入单个组件

可以通过以下命名导出将各个组件导入到项目中:

组成部分 命名导出 导入路径
<b-link> BLink bootstrap-vue

例子:

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

作为Vue.js插件导入

这个插件包括上面列出的所有独立组件。插件还包括任何组件别名。

命名导出 导入路径
LinkPlugin bootstrap-vue

例子:

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