面包屑导航(Breadcrumb)

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

  1. Admin
  2. Manage
  3. Library
<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>

使用 :items方法渲染物品。它可以是一组对象，以提供链接和活动状态。链接可以是href用于锚标记的或to用于路由器链接的。如果最后一个元素的活动状态为，则会自动设置undefined。

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

请参阅路由器支持参考页以获取特定于路由器链接的道具。

手动放置项目

可以手动将各个<b-breadcrumb-item>子组件放置在组件的默认插槽中<b-breadcrumb>，以代替使用 items prop, 以更好地控制每个项目的内容：

  1. Home
  2. Foo
  3. Bar
  4. Baz
<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>

请记住将active方法放在最后一个项目上。

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

组件参考

<b-breadcrumb>

功能组件
查看资料

物产

属性 类型 默认 描述
items 数组 要呈现的面包屑项目数组

<b-breadcrumb-item>

功能组件
查看资料

物产

属性 (Click to sort Ascending) 类型 默认 描述
href 串 表示标准a链接的链接目标URL
rel 串 在渲染的链接上设置'rel'属性
target 串 '_self' 在渲染的链接上设置'target'属性
active 布尔型 false 设置为“ true”时，使用有效样式将组件置于活动状态
disabled 布尔型 false 设置为“true”时，禁用组件的功能并将其置于禁用状态
to 字符串或对象 router-link属性：表示链接的目标路由。单击时，to属性的值将在内部传递到router.push（），因此该值可以是字符串或位置描述符对象
append 布尔型 false router-link属性：设置附加属性总是将相对路径附加到当前路径
replace 布尔型 false router-link属性：设置替换属性将在单击时调用“ router.replace（）”而不是“ router.push（）”，因此导航不会留下历史记录
event 字符串或数组 'click' router-link属性：指定触发链接的事件。在大多数情况下，应将其保留为默认值
active-class 串 router-link属性：配置在链接处于活动状态时应用的活动CSS类。通常，您将需要将此设置为类名称“ active”
exact 布尔型 false router-link属性：默认的活动类匹配行为是包含匹配。设置此道具将强制模式与路线完全匹配
exact-active-class 串 router-link属性：配置当链接处于完全匹配状态时应用的活动CSS类。通常，您将需要将此设置为类名称“ active”
router-tag 串 'a' router-link属性：指定要呈现的标签，它仍将监听单击事件以进行导航。“ router-tag”转换为最终渲染的路由器链接上的标签prop。通常，您应该使用默认值
no-prefetch 布尔型 false nuxt-link属性：为了提高Nuxt.js应用程序的响应速度，当链接将显示在视口中时，Nuxt.js将自动预取代码拆分页面。设置“不预取”将禁用特定链接的此功能
text 串 要在面包屑项目中呈现的文本
html 串 在面包屑项目中呈现的HTML字符串。谨慎使用
aria-current 串 'location' 设置“ aria-current”属性的值（当该项为活动项时）。支持的字符串值为“ location”，“ page”或“true”

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

大事件

事件 争论 描述
click
  1. 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)