Breadcrumb面包屑

显示当前页面在系统层级结构中的位置，并能向上返回。

何时使用

  • 当系统拥有超过两级以上的层级结构时；
  • 当需要告知用户『你在哪里』时；
  • 当需要向上导航的功能时。

代码演示

Breadcrumb 面包屑 - 图1

基本

最简单的用法

  1. <template>
  2.   <a-breadcrumb>
  3.     <a-breadcrumb-item>Home</a-breadcrumb-item>
  4.     <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item>
  5.     <a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item>
  6.     <a-breadcrumb-item>An Application</a-breadcrumb-item>
  7.   </a-breadcrumb>
  8. </template>

Breadcrumb 面包屑 - 图2

带有图标的

图标放在文字前面

  1. <template>
  2.   <a-breadcrumb>
  3.     <a-breadcrumb-item href="">
  4.       <a-icon type="home" />
  5.     </a-breadcrumb-item>
  6.     <a-breadcrumb-item href="">
  7.       <a-icon type="user" />
  8.       <span>Application List</span>
  9.     </a-breadcrumb-item>
  10.     <a-breadcrumb-item>
  11.       Application
  12.     </a-breadcrumb-item>
  13.   </a-breadcrumb>
  14. </template>

Breadcrumb 面包屑 - 图3

分隔符

使用separator=">"可以自定义分隔符，或者使用slot="separator"自定义更复杂的分隔符

  1. <template>
  2.   <div>
  3.     <a-breadcrumb separator=">">
  4.       <a-breadcrumb-item>Home</a-breadcrumb-item>
  5.       <a-breadcrumb-item href="">Application Center</a-breadcrumb-item>
  6.       <a-breadcrumb-item href="">Application List</a-breadcrumb-item>
  7.       <a-breadcrumb-item>An Application</a-breadcrumb-item>
  8.     </a-breadcrumb>
  9.     <a-breadcrumb>
  10.       <span slot="separator" style="color: red">></span>
  11.       <a-breadcrumb-item>Home</a-breadcrumb-item>
  12.       <a-breadcrumb-item href="">Application Center</a-breadcrumb-item>
  13.       <a-breadcrumb-item href="">Application List</a-breadcrumb-item>
  14.       <a-breadcrumb-item>An Application</a-breadcrumb-item>
  15.     </a-breadcrumb>
  16.   </div>
  17. </template>

Breadcrumb 面包屑 - 图4

vue-router

和 vue-router 进行结合使用。

  1. <template>
  2.   <div>
  3.     <a-breadcrumb :routes="routes">
  4.       <template slot="itemRender" slot-scope="{route, params, routes, paths}">
  5.         <span v-if="routes.indexOf(route) === routes.length - 1">
  6.           {{route.breadcrumbName}}
  7.         </span>
  8.         <router-link v-else :to="`${basePath}/${paths.join('/')}`">
  9.           {{route.breadcrumbName}}
  10.         </router-link>
  11.       </template>
  12.     </a-breadcrumb>
  13.     <br />
  14.     {{$route.path}}
  15.   </div>
  16. </template>
  17. <script>
  18.   export default {
  19.     data() {
  20.       const { lang } = this.$route.params;
  21.       return {
  22.         basePath: `/${lang}/components/breadcrumb`,
  23.         routes: [
  24.           {
  25.             path: 'index',
  26.             breadcrumbName: '首页',
  27.           },
  28.           {
  29.             path: 'first',
  30.             breadcrumbName: '一级面包屑',
  31.           },
  32.           {
  33.             path: 'second',
  34.             breadcrumbName: '当前页面',
  35.           },
  36.         ],
  37.       };
  38.     },
  39.   };
  40. </script>

API

参数说明类型可选值默认值
itemRender自定义链接函数，和 vue-router 配置使用， 也可使用 slot="itemRender" 和 slot-scope="props"({route, params, routes, paths}) => vNode-
params路由的参数object-
routesrouter 的路由栈信息object[]-
separator分隔符自定义string|slot'/'

和 browserHistory 配合

和 vue-router 一起使用时，默认生成的 url 路径是带有 # 的，如果和 browserHistory 一起使用的话，你可以使用 itemRender 属性定义面包屑链接。

<template>
  <a-breadcrumb :routes="routes">
    <template slot="itemRender" slot-scope="{route, params, routes, paths}">
      <span v-if="routes.indexOf(route) === routes.length - 1">
        {{route.breadcrumbName}}
      </span>
      <router-link v-else :to="paths.join('/')">
        {{route.breadcrumbName}}
      </router-link>
    </template>
  </a-breadcrumb>
</template>
<script>
  export default {
    data() {
      return {
        routes: [
          {
            path: 'index',
            breadcrumbName: '首页',
          },
          {
            path: 'first',
            breadcrumbName: '一级面包屑',
          },
          {
            path: 'second',
            breadcrumbName: '当前页面',
          },
        ],
      };
    },
  };
</script>