在下面的部分中，我们将使用<b-link>组件来呈现路由器链接。 <b-link>是大多数BootstrapVue可操作组件的构建块。您可以使用支持链接生成的任何其他组件， 如<b-link>, <b-button>, <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 标签

  • 类型: string
  • 默认值: 'a'

有时我们希望<router-link>呈现为另一个标签，例如<li>。 然后，我们可以使用router-tag属性指定要渲染到的标签，它仍将监听单击事件以进行导航。 router-tag转换为最终呈现的<router-link> 上的标签属性。 

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

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

注意: 不建议从<a>之外的其他任何地方更改标签，因为这会妨碍键盘和/或屏幕阅读器用户的可访问性，并且也不是非常适合SEO。

active 类

  • 类型: string
  • 默认值: 'router-link-active' (使用Nuxt.js时为'nuxt-link-active')

配置链接处于active状态时应用的activeCSS类。注意，默认值也可以通过linkActiveClass 路由器构造函数选项进行全局配置。

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

exact

  • 类型: boolean
  • 默认值: false

默认的活动类匹配行为是inclusive match。例如，<b-link to="/a">将应用该类， 只要当前路径以/a/或is /a开头。

这样的结果是，<b-link to="/">将对每条路线都有效！ 要将链接强制为“完全匹配模式”， 请使用exact的属性： 

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

查看更多解释active链接类live的示例。

exact-active 类

  • 类型: string
  • 默认值: 'router-link-exact-active' (使用Nuxt.js时'nuxt-link-exact-active')
  • 可用性: Vue Router 2.5.0+

配置具有完全匹配的活动链接时应用的活动CSS类。 注意，默认值也可以通过linkExactActiveClass 路由器构造函数选项进行全局配置。

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

当BootstrapVue检测到您的应用程序正在Nuxt.js下运行时， 它将呈现一个<nuxt-link>子组件， 而不是一个<router-link>。 <nuxt-link>支持上述所有路由器链接属性，以及以下特定于nuxt.js的附加属性。

no-prefetch

  • 类型: boolean
  • 默认值: false
  • 可用性: Nuxt.js 2.4.0+

为了提高Nuxt.js应用程序的响应能力，当链接显示在视区内时，Nuxt.js将自动prefetch代码分割的页面。不设置no-prefetch将禁用特定链接的此功能。

注意: 如果您在 nuxt.config.js配置中禁用了prefetch （router: { prefetchLinks: false}）， 或者正在使用nuxt.js< 2.4.0的版本，则此属性将无效。

Prefetch支持要求支持IntersectionObserver （请参阅CanIUse）。 对于不支持IntersectionObserver的浏览器，可以在nuxt.config.js中使用以下条件polyfill： 

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