ルーターリンクのサポート

いくつかのBootstrapVueコンポーネントは、_Vue Router_および_Nuxt.js_と互換性のある<router-link>コンポーネントのレンダリングをサポートしています。詳細については、公式Vue Routerドキュメントと公式Nuxt.jsドキュメントを参照してください。

共通のルーターリンクプロパティ

以下のセクションでは、<b-link>コンポーネントを使用してルーターリンクをレンダリングしています。<b-link>は、ほとんどのBootstrapVueの_操作可能_なコンポーネントの構成要素です。<b-link>、<b-button>、<b-avatar>、<b-breadcrumb-item>、<b-list-group-item>、<b-nav-item>、<b-dropdown-item>、<b-pagination-nav>など、リンク生成をサポートする他のコンポーネントを使用することもできます。すべてのプロパティがすべてのコンポーネントで使用できるわけではないことに注意してください。詳細は、それぞれのコンポーネントのドキュメントを参照してください。

`to`

型: `string | Location`
<router-link>の生成に必須

リンクのターゲットルートを示します。クリックされると、`to`プロパティの値が内部で`router.push()`に渡されるため、値は文字列またはロケーション記述子オブジェクトのいずれかになります。

<div>
  <!-- Literal string -->
  <b-link to="home">Home</b-link>
  <!-- Renders to -->
  <a href="home">Home</a>

  <!-- JavaScript expression using `v-bind` -->
  <b-link v-bind:to="'home'">Home</b-link>

  <!-- Omitting `v-bind` is fine, just as binding any other prop -->
  <b-link :to="'home'">Home</b-link>

  <!-- Same as above -->
  <b-link :to="{ path: 'home' }">Home</b-link>

  <!-- Named route -->
  <b-link :to="{ name: 'user', params: { userId: 123 } }">User</b-link>

  <!-- With query, resulting in `/register?plan=private` -->
  <b-link :to="{ path: 'register', query: { plan: 'private' } }">Register</b-link>

  <!-- Render a non-router link by omitting `to` and specifying an `href` -->
  <b-link href="/home">Home</b-link>
</div>

`replace`

型: `boolean`
デフォルト: `false`

`replace`プロパティを設定すると、クリック時に`router.push()`の代わりに`router.replace()`が呼び出されるため、ナビゲーションは履歴レコードを残しません。

<div>
  <b-link :to="{ path: '/abc'}" replace></b-link>
</div>

`append`

型: `boolean`
デフォルト: `false`

`append`プロパティを設定すると、常に相対パスが現在のパスに追加されます。たとえば、`/a`から相対リンク`b`に移動する場合、`append`がないと`/b`になりますが、`append`があると`/a/b`になります。

<div>
  <b-link :to="{ path: 'relative/path'}" append></b-link>
</div>

`router-tag`

型: `string`
デフォルト: `'a'`

<router-link>を別のタグ(例：<li>)としてレンダリングする場合があります。その場合は、`router-tag`プロパティを使用してレンダリングするタグを指定できます。ナビゲーションのクリックイベントは引き続きリッスンされます。`router-tag`は、最終的にレンダリングされる<router-link>の`tag`プロパティに変換されます。

<div>
  <b-link to="/foo" router-tag="li">foo</b-link>

  <!-- Renders as -->
  <li>foo</li>
</div>

**注意:** <a>以外のタグに変更することは、キーボードやスクリーンリーダーのユーザーのアクセシビリティを阻害し、SEOにもあまり適していないため、お勧めできません。

`active-class`

型: `string`
デフォルト: `'router-link-active'` (Nuxt.jsを使用する場合は`'nuxt-link-active'`)

リンクがアクティブなときに適用されるアクティブCSSクラスを設定します。デフォルト値は、linkActiveClass ルーターコンストラクタオプションを使用してグローバルに設定することもできます。

ルーターリンクをサポートするコンポーネント( `to`プロパティを持つ)では、現在のルートが`to`プロパティと一致する場合にBootstrapのアクティブスタイルをコンポーネントに適用するには、これをクラス`'active'`(または`'active'`を含むスペース区切りの文字列)に設定する必要があります。

`exact`

型: `boolean`
デフォルト: `false`

デフォルトのアクティブクラスマッチング動作は、**包含一致**です。たとえば、<b-link to="/a">は、現在のパスが`/a/`で始まるか`/a`である限り、このクラスが適用されます。

この結果の1つは、<b-link to="/">がすべてのルートでアクティブになることです。リンクを「完全一致モード」にするには、`exact`プロパティを使用します。

<div>
  <!-- This link will only be active at `/` -->
  <b-link to="/" exact></b-link>
</div>

アクティブリンククラスを説明するその他の例は、ライブで確認してください。

`exact-active-class`

型: `string`
デフォルト: `'router-link-exact-active'` (Nuxt.jsを使用する場合は`'nuxt-link-exact-active'`)
利用可能: Vue Router 2.5.0以降

リンクが完全一致でアクティブなときに適用されるアクティブCSSクラスを設定します。デフォルト値は、linkExactActiveClass ルーターコンストラクタオプションを使用してグローバルに設定することもできます。

`exact-path`

型: `boolean`
デフォルト: `false`
利用可能: Vue Router 3.5.0以降

URLの`path`セクションのみを使用して一致させることができます。`query`セクションと`hash`セクションは事実上無視されます。

<!-- this link will also be active at `/search?page=2` or `/search#filters` -->
<router-link to="/search" exact-path> </router-link>

`exact-path-active-class`

型: `string`
デフォルト: `'router-link-exact-path-active'`
利用可能: Vue Router 3.5.0以降

リンクが正確なパス一致でアクティブな場合に適用されるアクティブなCSSクラスを設定します。デフォルト値は、`linkExactPathActiveClass`ルーターコンストラクタオプションを使用してグローバルに構成することもできます。

Nuxt.js固有のルーターリンクプロパティ

BootstrapVueは、アプリがNuxt.jsで実行されていることを検出すると、<router-link>の代わりに<nuxt-link>サブコンポーネントをレンダリングします。<nuxt-link>は、上記のすべてのルーターリンクプロパティに加えて、以下のNuxt.js固有のプロパティもサポートしています。

`prefetch`

型: `boolean`
デフォルト: `null`
利用可能: Nuxt.js 2.10.0以降およびBootstrapVue 2.15.0以降

Nuxt.jsアプリケーションの応答性を向上させるために、リンクがビューポート内に表示される場合、Nuxt.jsはコード分割されたページを自動的にプリフェッチします。`prefetch`を`true`または`false`に設定すると、`nuxt.config.js`設定ファイルで設定された`router.prefetchLinks`のデフォルト値が上書きされます。

注意事項

2.10.0より前のバージョンのNuxt.jsを使用している場合、このプロパティは効果がありません。
プロパティ値を`v-bind`することを忘れないでください(例：`:prefetch="true"`または`:prefetch="false"`)。

プリフェッチのサポートには、IntersectionObserverのサポートが必要です(Can I useを参照)。IntersectionObserverをサポートしていないブラウザの場合、`nuxt.config.js`で次の条件付きポリフィルを使用できます。

export default {
  head: {
    script: [
      {
        src: 'https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver',
        body: true
      }
    ]
  }
}

`no-prefetch`

型: `boolean`
デフォルト: `false`
利用可能: Nuxt.js 2.4.0以降

Nuxt.jsアプリケーションの応答性を向上させるために、リンクがビューポート内に表示される場合、Nuxt.jsはコード分割されたページを自動的にプリフェッチします。`no-prefetch`を設定すると、特定のリンクに対してこの機能が無効になります。

注意: nuxt.config.js 設定ファイルでプリフェッチを無効にしている場合 (router: { prefetchLinks: false })、または Nuxt.js のバージョンが < 2.4.0 の場合、このプロパティは効果がありません。

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

v2.15.0以降

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

注意事項

サードパーティ製コンポーネントは、to プロパティが設定されている場合にのみ使用されます。
すべてのサードパーティ製コンポーネントが <router-link> でサポートされているすべてのプロパティをサポートしているわけではなく、完全修飾ドメイン名 URL やハッシュのみの URL をサポートしていない場合もあります。詳細は、サードパーティ製コンポーネントのドキュメントを参照してください。

`router-component-name`

型: `string`
デフォルト: undefined
利用可能バージョン: BootstrapVue 2.15.0以降

このプロパティを、<router-link> 互換コンポーネントの名前に設定します。たとえば、Gridsome の場合は 'g-link' です。

デフォルトのままにした場合、BootstrapVue は自動的に <router-link> または <nuxt-link> を選択します。