BootstrapVue Breadcrumb 面包屑导航条

BootstrapVue Breadcrumb 面包屑一般用在当前网页所在的位置。

例子

<template>
  <b-breadcrumb :items="items"></b-breadcrumb>
</template>
<script>
  export default {
    data() {
      return {
        items: [
          {
            text: '首页',
            href: 'http://www.itxst.com'
          },
          {
            text: '商品管理',
            href: '#'
          },
          {
            text: '商品详情',
            active: true
          }
        ]
      }
    }
  }
</script>

手动添加内容

例子

<template>
  <b-breadcrumb>
    <b-breadcrumb-item href="http://www.itxst.com">
      <b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon>
      首页
    </b-breadcrumb-item>
    <b-breadcrumb-item href="#foo">商品管理</b-breadcrumb-item>
    <b-breadcrumb-item href="#bar">商品详情</b-breadcrumb-item>
    <b-breadcrumb-item active>商品属性</b-breadcrumb-item>
  </b-breadcrumb>
</template>

属性列表

属性名称类型说明
textString渲染后的显示的文本
htmlString渲染后的显示的html
aria-currentString无障碍阅读,设置“ aria-current”属性的值(当该项目为活动项目时)。支持“ location”,“ page”或“ true”
hrefString将组件渲染为链接,如href="http://www.itxst.com"
relString将组件渲染为链接时 a标签的rel属性
activeBoolean设置为“ true”时,当前项将处于活动状态
targetString将组件渲染为链接时 a标签的target属性
disabledBoolean是否禁用,默认为false
toString or Objectvue路由相关,<router-link> 的to属性
appendBooleanvue路由相关,<router-link> 的append属性
replaceBooleanvue路由相关,<router-link> 的replace属性
active-classStringvue路由相关,当前路径的样式
exactBoolean<router-link> prop: The default active class matching
behavior is inclusive match. Setting this prop forces the
mode to exactly match the route
exact-active-classString<router-link> prop: Configure the active CSS class applied
when the link is active with exact match. Typically you will
want to set this to class name 'active'
prefetchBoolean<nuxt-link> prop: To improve the responsiveness of your
Nuxt.js applications, when the link will be displayed within
the viewport, Nuxt.js will automatically prefetch the code
splitted page. Setting 'prefetch' to 'true' or 'false' will
overwrite the default value of 'router.prefetchLinks'
no-prefetchBoolean<nuxt-link> prop: To improve the responsiveness
of your Nuxt.js applications, when the link will be displayed
within the viewport, Nuxt.js will automatically prefetch
the code splitted page. Setting 'no-prefetch' will disabled
this feature for the specific link
router-component-nameString<b-link> prop: BootstrapVue auto detects between
`<router-link>` and `<nuxt-link>`. In cases where you
want to use a 3rd party link component based on
`<router-link>`, set this prop to the component name
. e.g. set it to 'g-link' if you are using Gridsome
(note only `<router-link>` specific props are passed to
the component)
aria-labelString无障碍阅读的内容