路由連結支援

常見路由連結屬性

在以下各節中，我們使用 <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

• 類型：字串 | 位置
• 需要產生 <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

• 類型：布林值
• 預設值：false

設定 replace 屬性會在按下時呼叫 router.replace() 而不是 router.push()，因此導航不會留下歷史記錄。

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

append

• 類型：布林值
• 預設值：false

設定 append 屬性會始終將相對路徑附加到目前的路徑。例如，假設我們從 /a 導航到相對連結 b，在沒有 append 的情況下，將會停留在 /b，而在有 append 的情況下，將會停留在 /a/b。

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

router-tag

• 類型：字串
• 預設值：'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> 以外的東西變更，因為這會阻礙鍵盤和/或螢幕朗讀程式使用者存取，而且也不利於搜尋引擎最佳化。

active-class

• 類型：字串
• 預設值：'router-link-active'（在使用 Nuxt.js 時為 'nuxt-link-active'）

設定連結為作用中時套用的主動 CSS 類別。請注意，也可以透過 路由建構函式選項 linkActiveClass 全域設定預設值。

對於支援路由連結的元件（有 to 屬性），你會希望將此屬性設定為類別 'active'（或包含 'active' 的以空白分隔的字串），以在目前路由與 to 屬性相符時，套用 Bootstrap 的主動樣式到該元件上。

exact

• 類型：布林值
• 預設值：false

預設的主動類別比對行為是包含式比對。例如，<b-link to="/a"> 將會套用這個類別，只要目前的路由從 /a/ 開始，或是等於 /a。

這其中一個後果是 <b-link to="/"> 將會對每個路由作用中！如果要強制連結進入「完全比對模式」，請使用 exact 屬性。

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

可以 實時檢視更多說明主動連結類別的範例。

exact-active-class

• 類型：字串
• 預設值：'router-link-exact-active'（在使用 Nuxt.js 時為 'nuxt-link-exact-active'）
• 可用性：Vue Router 2.5.0+

設定連結在完全比對下套用的作用中 CSS 類別。請注意預設值也可以透過 linkExactActiveClass 路由建構函式選項進行全域設定。

對於支援路由連結的元件（有 to 屬性），你會希望將此屬性設定為類別 'active'（或包含 'active' 的以空白分隔的字串），以在目前路由與 to 屬性相符時，套用 Bootstrap 的主動樣式到該元件上。

exact-path

• 類型：布林值
• 預設值：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

• 類型：字串
• 預設：'router-link-exact-path-active'
• 可用性：Vue Router 3.5.0+

設定連結在完全路徑比對下套用的作用中 CSS 類別。請注意預設值也可以透過 linkExactPathActiveClass 路由建構函式選項進行全域設定。

對於支援路由連結的元件（有 to 屬性），你會希望將此屬性設定為類別 'active'（或包含 'active' 的以空白分隔的字串），以在目前路由與 to 屬性相符時，套用 Bootstrap 的主動樣式到該元件上。

特定於 Nuxt.js 的路由連結屬性

如果 BootstrapVue 偵測到你的應用程式在 Nuxt.js 下執行，它會轉譯 <nuxt-link> 子元件，而非 <router-link>。 <nuxt-link> 支援上述所有路由連結屬性，以及以下特定於 Nuxt.js 的額外屬性。

prefetch

• 類型：布林值
• 預設：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 支援（參閱 是否可以使用）。對於不支援 IntersectionObserver 的瀏覽器，你可以使用 nuxt.config.js 中以下的條件式載入程式碼

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

no-prefetch

• 類型：布林值
• 預設值：false
• 可用性：Nuxt.js 2.4.0+

為了改善 Nuxt.js 應用程式的回應速度，如果連結會顯示在視窗中，Nuxt.js 會自動預先載入程式碼分割的頁面。設定 no-prefetch 會針對特定連結停用此功能。

備註：如果你已在 nuxt.config.js 組態 (router: { prefetchLinks: false }) 中停用預先載入，或使用的是 < 2.4.0 版本的 Nuxt.js，那麼這個屬性將不會產生任何效果。

第三方路由連結支援

v2.15.0+

BootstrapVue 自動偵測使用 <router-link> 和 <nuxt-link> 連結組件。一些第三方框架也提供了 <router-link> 的客製化版本，例如 Gridsome 的 <g-link> 組件。BootstrapVue 可以透過使用 router-component-name 屬性，支援這些相容於 <router-link> 的第三方組件。所有 vue-router 屬性（不含 <nuxt-link> 特定屬性）都會傳遞給指定的路由連結組件。

注意事項

• 只有在設定 to 屬性時，才會使用第三方組件。
• 並非所有第三方組件都支援 <router-link> 支援的所有屬性，也不支援完全限定網域名稱 URL，或只有雜湊的 URL。請參閱第三方組件文件以取得詳細資訊。

router-component-name

• 類型：字串
• 預設值：undefined
• 可用性：BootstrapVue 2.15.0+

將此屬性設定為與 <router-link> 相容的組件名稱，例如，對 Gridsome 的 'g-link'。

如果保留預設值，BootstrapVue 會自動選取 <router-link> 或 <nuxt-link>。