链接(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来禁用链接功能。
<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 |
- 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)