面包屑 | 组件 | BootstrapVue 中文

在导航层级中指示当前页面的位置。分隔符通过 ::before 和 content 在 CSS 中自动添加。

概述

<template>
  <b-breadcrumb :items="items"></b-breadcrumb>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          {
            text: 'Admin',
            href: '#'
          },
          {
            text: 'Manage',
            href: '#'
          },
          {
            text: 'Library',
            active: true
          }
        ]
      }
    }
  }
</script>

<!-- b-breadcrumb.vue -->

使用 :items 属性渲染项。它可以是提供链接和活动状态的对象数组。链接可以是锚标记的 href，或路由器链接的 to。面包屑基于以下假设：每组有序面包屑中有一个活动链接，因此最后一个元素的活动状态自动设置为 false。

const items = [
  {
    text: 'Home',
    href: 'https://google.com'
  },
  {
    text: 'Posts',
    to: { name: 'home' }
  },
  {
    text: 'Another Story',
    active: true
  }
]

请参阅路由器支持参考页面，了解特定于路由器链接的属性。

手动放置的项

您也可以手动将各个 <b-breadcrumb-item> 子组件放置在 <b-breadcrumb> 组件的默认插槽中，作为使用 items 属性的替代方法，以更好地控制每个项目的具体内容

<template>
  <b-breadcrumb>
    <b-breadcrumb-item href="#home">
      <b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon>
      Home
    </b-breadcrumb-item>
    <b-breadcrumb-item href="#foo">Foo</b-breadcrumb-item>
    <b-breadcrumb-item href="#bar">Bar</b-breadcrumb-item>
    <b-breadcrumb-item active>Baz</b-breadcrumb-item>
  </b-breadcrumb>
</template>

<!-- b-breadcrumb-item.vue -->

请记住在最后一个项目上设置 active 属性。

<b-breadcrumb-item> 还支持各种 <router-link> 属性，例如 to 等。

组件参考

功能组件

查看源代码

<b-breadcrumb> 属性
<b-breadcrumb> 插槽

所有属性默认值均可全局配置。

属性	类型	默认值	说明
`items`	`数组`		要呈现的面包屑项目数组

名称	说明
`default`	要放置在面包屑中的内容（面包屑项目）

功能组件

查看源代码

<b-breadcrumb-item> 属性
<b-breadcrumb-item> 插槽
<b-breadcrumb-item> 事件

所有属性默认值均可全局配置。

属性（单击按升序排列）	类型（单击按升序排列）	默认值	说明
`active`	`布尔值`	`false`	设置为 `true` 时，使用活动样式将组件置于活动状态
`active-class`	`字符串`		<router-link> 属性：配置当链接处于活动状态时应用的活动 CSS 类。通常您会希望将其设置为类名“active”
`append`	`布尔值`	`false`	<router-link> 属性：设置 append 属性始终将相对路径附加到当前路径
`aria-current`	`字符串`	`'location'`	设置 'aria-current' 属性的值（当该项目为活动项目时）。支持的字符串值为 'location'、'page' 或 'true'
`disabled`	`布尔值`	`false`	设置为 `true` 时，禁用组件的功能并将其置于禁用状态
`exact`	`布尔值`	`false`	<router-link> 属性：默认活动类匹配行为是包含匹配。设置此属性会强制模式与路由完全匹配
`exact-active-class`	`字符串`		<router-link> 属性：配置在链接使用完全匹配时应用的活动 CSS 类。通常，您会希望将其设置为类名 'active'
`exact-path`	`布尔值`	`false`	<router-link> 属性：允许仅使用 URL 的路径部分进行匹配，有效忽略查询和哈希部分
`exact-path-active-class`	`字符串`		<router-link> 属性：配置在链接使用完全路径匹配时应用的活动 CSS 类。通常，您会希望将其设置为类名 'active'
`href`	`字符串`		<b-link> 属性：表示标准 a 链接的目标 URL
`html` 谨慎使用	`字符串`		在面包屑项目中呈现的 HTML 字符串
`no-prefetch`	`布尔值`	`false`	<nuxt-link> 属性：为了提高 Nuxt.js 应用程序的响应能力，当链接将在视口中显示时，Nuxt.js 将自动预取代码拆分页面。设置 `no-prefetch` 将禁用特定链接的此功能
`prefetch` v2.15.0+	`布尔值`	`null`	<nuxt-link> 属性：为了提高 Nuxt.js 应用程序的响应能力，当链接将在视口中显示时，Nuxt.js 将自动预取代码拆分页面。将 `prefetch` 设置为 `true` 或 `false` 将覆盖 `router.prefetchLinks` 的默认值
`rel`	`字符串`	`null`	<b-link> 属性：设置呈现的链接上的 `rel` 属性
`replace`	`布尔值`	`false`	<router-link> 属性：设置 replace 属性将在单击时调用 `router.replace()` 而不是 `router.push()`，因此导航不会留下历史记录
`router-component-name` v2.15.0+	`字符串`		<b-link> 属性：BootstrapVue 在 `<router-link>` 和 `<nuxt-link>` 之间自动检测。在您希望使用基于 `<router-link>` 的第三方链接组件的情况下，将此属性设置为组件名称。例如，如果您使用 Gridsome，则将其设置为 'g-link'（注意，仅将 `<router-link>` 特定的属性传递给组件）
`target`	`字符串`	`'_self'`	<b-link> 属性：设置呈现的链接上的 `target` 属性
`text`	`字符串`		在面包屑项目中呈现的文本
`to`	`对象` 或 `字符串`		<router-link> 属性：表示链接的目标路由。单击时，to 属性的值将内部传递给 `router.push()`，因此该值可以是字符串或 Location 描述符对象

<b-breadcrumb-item> 支持生成 <router-link> 或 <nuxt-link> 组件（如果使用 Nuxt.js）。有关路由链接（或 nuxt 链接）特定属性的更多详细信息，请参阅路由支持参考部分。

注意：支持 HTML 字符串的属性（*-html）在传递原始用户提供的值时容易受到跨站脚本 (XSS) 攻击的影响。您必须首先正确净化用户输入！

名称	说明
`default`	要放置在面包屑项中的内容

事件	参数	说明
`click`	`event` - 本机点击事件对象	点击时触发

导入单个组件

您可以通过以下命名导出将单个组件导入到您的项目中

组件	命名导出	导入路径
`<b-breadcrumb>`	`BBreadcrumb`	`bootstrap-vue`
`<b-breadcrumb-item>`	`BBreadcrumbItem`	`bootstrap-vue`

示例

import { BBreadcrumb } from 'bootstrap-vue'
Vue.component('b-breadcrumb', BBreadcrumb)

作为 Vue.js 插件导入

此插件包含上面列出的所有单个组件。插件还包括任何组件别名。

命名导出	导入路径
`BreadcrumbPlugin`	`bootstrap-vue`

示例

import { BreadcrumbPlugin } from 'bootstrap-vue'
Vue.use(BreadcrumbPlugin)

概述

面包屑项

手动放置的项

组件参考

属性

插槽

属性

插槽

事件

导入单个组件

作为 Vue.js 插件导入