链接(Links)

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

凵

刂

Zoomla!逐浪CMS-中国最早引入Bootstrap，基于dotNET大数据全栈高端门户系统，集成电商微信OA小程序教育考试诸多功能。免费下载

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

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

link 类型

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

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

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

具有`href="#"`的链接

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

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

链接禁用状态

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

Disabled Link

<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;.

组件引用

`<b-link>`

View source

<b-link> 属性
<b-link> 事件

属性

属性 (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`	Native click event	单击链接时

导入单个组件

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

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

例子:

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

作为Vue.js插件导入

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

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