リンク

<b-link> は、リンク機能を提供するほとんどの BootstrapVue コンポーネントの基礎となります。

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

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

リンクの種類

href プロパティに値を指定することで、標準のリンク（<a>）要素がレンダリングされます。代わりに <router-link> を生成するには、to プロパティを介してルートの場所を指定します。

ルーターリンクは、さまざまな追加プロパティをサポートしています。詳細は、ルーターサポート リファレンスセクションを参照してください。

アプリが Nuxt.js で実行されている場合、<router-link> の代わりに <nuxt-link> コンポーネントが使用されます。<nuxt-link> コンポーネントは、<router-link> と同じ機能をすべてサポートしており（<router-link> のラッパーコンポーネントであるため）、さらに多くの機能を備えています。

サードパーティのルーターリンク

BootstrapVue は、<router-link> および <nuxt-link> リンクコンポーネントの使用を自動的に検出します。一部のサードパーティフレームワークでは、Gridsome の <g-link> コンポーネント など、カスタマイズされたバージョンの <router-link> も提供されています。<b-link> は、router-component-name プロパティを使用することで、これらのサードパーティの <router-link> 互換コンポーネントをサポートできます。すべての vue-router プロパティ（<nuxt-link> 特有のプロパティを除く）は、指定されたルーターリンクコンポーネントに渡されます。

サードパーティコンポーネントは、to プロパティが設定されている場合にのみ使用されることに注意してください。

href="#" を持つリンク

通常、<a href="#"> をクリックすると、ドキュメントがページの先頭にスクロールします。<b-link> は、href が # に設定されている場合にデフォルトのアクション（先頭へのスクロール）を防ぐことで、この問題に対処します。

先頭へのスクロール動作が必要な場合は、標準の <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; をサポートしているわけではありません。