路由器链接支持

通用路由器链接属性

在以下部分中，我们使用 <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.replace() 而不是 router.push()，因此导航不会留下历史记录。

<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 属性），您需要将此属性设置为类 'active'（或包含 'active' 的空格分隔字符串），以便在当前路由与 to 属性匹配时对组件应用 Bootstrap 的活动样式。

exact

• 类型：boolean
• 默认值：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

• 类型：string
• 默认值：'router-link-exact-active'（使用 Nuxt.js 时为 'nuxt-link-exact-active'）
• 可用性：Vue 路由 2.5.0+

配置当链接处于活动状态且匹配精确时应用的活动 CSS 类。请注意，默认值还可以通过 linkExactActiveClass 路由构造函数选项全局配置。

对于支持路由链接的组件（具有 to 属性），您需要将此属性设置为类 'active'（或包含 'active' 的空格分隔字符串），以便在当前路由与 to 属性匹配时对组件应用 Bootstrap 的活动样式。

exact-path

• 类型：boolean
• 默认值：false
• 可用性：Vue 路由 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 路由 3.5.0+

配置当链接处于活动状态且路径匹配精确时应用的活动 CSS 类。请注意，默认值还可以通过 linkExactPathActiveClass 路由构造函数选项全局配置。

对于支持路由链接的组件（具有 to 属性），您需要将此属性设置为类 'active'（或包含 'active' 的空格分隔字符串），以便在当前路由与 to 属性匹配时对组件应用 Bootstrap 的活动样式。

Nuxt.js 特定的路由链接属性

当 BootstrapVue 检测到你的应用在 Nuxt.js 下运行时，它将渲染一个 <nuxt-link> 子组件，而不是 <router-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 的默认值。

注意

• 如果你正在使用 Nuxt.js < 2.10.0 的版本，那么此属性将不起作用。
• 请记住 v-bind 属性值（例如 :prefetch="true" 或 :prefetch="false"）。

预取支持需要 IntersectionObserver 的支持（参见 Can I use）。对于不支持 IntersectionObserver 的浏览器，你可以在 nuxt.config.js 中使用以下条件 polyfill

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> 链接组件。一些第三方框架还提供了 <router-link> 的自定义版本，例如 Gridsome 的 <g-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>。