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>

属性列表

属性名称	类型	说明
text	String	渲染后的显示的文本
html	String	渲染后的显示的html
aria-current	String	无障碍阅读,设置“ aria-current”属性的值（当该项目为活动项目时）。支持“ location”，“ page”或“ true”
href	String	将组件渲染为链接，如href="http://www.itxst.com"
rel	String	将组件渲染为链接时 a标签的rel属性
active	Boolean	设置为“ true”时，当前项将处于活动状态
target	String	将组件渲染为链接时 a标签的target属性
disabled	Boolean	是否禁用，默认为false
to	String or Object	vue路由相关，<router-link> 的to属性
append	Boolean	vue路由相关，<router-link> 的append属性
replace	Boolean	vue路由相关，<router-link> 的replace属性
active-class	String	vue路由相关，当前路径的样式
exact	Boolean	<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-class	String	<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'
prefetch	Boolean	<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-prefetch	Boolean	<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-name	String	<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-label	String	无障碍阅读的内容