連結

<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> 元件。可透過使用 router-component-name 屬性，讓 <b-link> 支援這些第三方、與 <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;。