链接

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

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

<div>
  <b-link href="#foo">Link</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> 的定制版本，例如 Gridsome 的 <g-link> 组件。 <b-link> 可以通过使用 router-component-name 属性来支持这些第三方 <router-link> 兼容组件。所有 vue-router 属性（不包括 <nuxt-link> 特定的属性）都将传递给指定的路由链接组件。

请注意，仅当设置了 to 属性时，才会使用第三方组件。

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

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

如果你需要滚动到顶部，请使用标准的 <a href="#">...</a> 标记。

链接禁用状态

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

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

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

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

注意：Bootstrap v4 CSS 目前对已禁用链接和未禁用链接的样式设置没有区别。您可以使用以下自定义 CSS 为已禁用链接设置样式（通过阻止悬停样式更改）

a.disabled {
  pointer-events: none;
}

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

组件参考

`<b-link>`

查看源代码

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

属性

所有属性默认值都可全局配置。

属性 (点击按升序排列)	类型 (点击按升序排列)	默认值	说明
`active`	`布尔值`	`false`	设置为 `true` 时，组件处于活动状态并带有活动样式
`active-class`	`字符串`		<router-link> 属性：配置链接处于活动状态时应用的活动 CSS 类。通常，您会希望将其设置为类名“active”
`append`	`布尔值`	`false`	<router-link> 属性：设置 append 属性始终将相对路径追加到当前路径
`disabled`	`布尔值`	`false`	设置为 `true` 时，禁用组件的功能并将其置于禁用状态
`event`	`Array` 或 `String`		<router-link> 属性：指定触发链接的事件。在大多数情况下，您应该将其保留为默认值
`exact`	`布尔值`	`false`	<router-link> 属性：默认活动类匹配行为是包含匹配。设置此属性会强制模式与路由完全匹配
`exact-active-class`	`字符串`		<router-link> 属性：配置链接在完全匹配时处于活动状态时应用的活动 CSS 类。通常，您会希望将其设置为类名“active”
`exact-path`	`布尔值`	`false`	<router-link> 属性：允许仅使用 URL 的路径部分进行匹配，有效地忽略查询和哈希部分
`exact-path-active-class`	`字符串`		<router-link> prop：配置在链接处于活动状态时应用的活动 CSS 类，并与精确路径匹配。通常，您需要将其设置为类名“active”
`href`	`字符串`		表示标准 a 链接的目标 URL
`no-prefetch`	`布尔值`	`false`	<nuxt-link> prop：为提高 Nuxt.js 应用程序的响应能力，当链接在视口中显示时，Nuxt.js 会自动预取代码拆分的页面。设置 `no-prefetch` 将禁用特定链接的此功能
`prefetch` v2.15.0+	`布尔值`	`null`	<nuxt-link> prop：为提高 Nuxt.js 应用程序的响应能力，当链接在视口中显示时，Nuxt.js 会自动预取代码拆分的页面。将 `prefetch` 设置为 `true` 或 `false` 将覆盖 `router.prefetchLinks` 的默认值
`rel`	`字符串`	`null`	设置呈现的链接上的“rel”属性
`replace`	`布尔值`	`false`	<router-link> prop：设置 replace prop 将在单击时调用 `router.replace()` 而不是 `router.push()`，因此导航不会留下历史记录
`router-component-name` v2.15.0+	`字符串`		<b-link> prop：BootstrapVue 在 `<router-link>` 和 `<nuxt-link>` 之间自动检测。在您希望使用基于 `<router-link>` 的第三方链接组件的情况下，将此 prop 设置为组件名称。例如，如果您使用 Gridsome，则将其设置为“g-link”（注意仅将 `<router-link>` 特定的 prop 传递给组件）
`router-tag`	`字符串`		<router-link> prop：指定要呈现的标签，它仍会侦听导航的单击事件。`router-tag` 转换为最终呈现的 `<router-link>` 上的 tag prop。通常，您应该使用默认值
`target`	`字符串`	`'_self'`	设置呈现的链接上的“target”属性
`to`	`Object` 或 `String`		<router-link> prop：表示链接的目标路由。单击时，to prop 的值将在内部传递给 `router.push()`，因此该值可以是字符串或 Location 描述符对象

<b-link> 支持生成 <router-link> 或 <nuxt-link> 组件（如果使用 Nuxt.js）。有关路由链接（或 nuxt 链接）特定 prop 的更多详细信息，请参阅路由支持参考部分。

插槽

名称	说明
`默认`	放置在链接中的内容

事件

事件	参数	说明
`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`

示例

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