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

分隔符

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

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

Breadcrumb面包屑 - 图3

分隔符

使用 Breadcrumb.Separator 可以自定义分隔符。

  1. <template>
  2. <a-breadcrumb separator="">
  3. <a-breadcrumb-item>Location</a-breadcrumb-item>
  4. <a-breadcrumb-separator>:</a-breadcrumb-separator>
  5. <a-breadcrumb-item href="">
  6. Application Center
  7. </a-breadcrumb-item>
  8. <a-breadcrumb-separator />
  9. <a-breadcrumb-item href="">
  10. Application List
  11. </a-breadcrumb-item>
  12. <a-breadcrumb-separator />
  13. <a-breadcrumb-item>An Application</a-breadcrumb-item>
  14. </a-breadcrumb>
  15. </template>

Breadcrumb面包屑 - 图4

带有图标的

图标放在文字前面

  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面包屑 - 图5

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: '/components/breadcrumb',
  23. routes: [
  24. {
  25. path: 'index',
  26. breadcrumbName: 'home',
  27. },
  28. {
  29. path: 'first',
  30. breadcrumbName: 'first',
  31. children: [
  32. {
  33. path: '/general',
  34. breadcrumbName: 'General',
  35. },
  36. {
  37. path: '/layout',
  38. breadcrumbName: 'Layout',
  39. },
  40. {
  41. path: '/navigation',
  42. breadcrumbName: 'Navigation',
  43. },
  44. ],
  45. },
  46. {
  47. path: 'second',
  48. breadcrumbName: 'second',
  49. },
  50. ],
  51. };
  52. },
  53. };
  54. </script>

Breadcrumb面包屑 - 图6

带下拉菜单的面包屑

面包屑支持下拉菜单。

  1. <template>
  2. <a-breadcrumb>
  3. <a-breadcrumb-item>Ant Design Vue</a-breadcrumb-item>
  4. <a-breadcrumb-item><a href="">Component</a></a-breadcrumb-item>
  5. <a-breadcrumb-item>
  6. <a href="">General</a>
  7. <a-menu slot="overlay">
  8. <a-menu-item>
  9. <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
  10. General
  11. </a>
  12. </a-menu-item>
  13. <a-menu-item>
  14. <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
  15. Layout
  16. </a>
  17. </a-menu-item>
  18. <a-menu-item>
  19. <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
  20. Navigation
  21. </a>
  22. </a-menu-item>
  23. </a-menu>
  24. </a-breadcrumb-item>
  25. <a-breadcrumb-item>Button</a-breadcrumb-item>
  26. </a-breadcrumb>
  27. </template>

API

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

Breadcrumb.Item

参数参数类型默认值版本
href链接的目的地string-1.5.0
overlay下拉菜单的内容Menu | () => Menu-1.5.0

事件

事件名称说明回调参数版本
click单击事件(e:MouseEvent)=>void-

Breadcrumb.Separator 3.21.0

参数参数类型默认值版本

注意:在使用 Breadcrumb.Separator 时,其父组件的分隔符必须设置为 separator="",否则会出现父组件默认的分隔符。

routes

  1. interface Route {
  2. path: string;
  3. breadcrumbName: string;
  4. children: Array<{
  5. path: string;
  6. breadcrumbName: string;
  7. }>;
  8. }

和 browserHistory 配合

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

  1. <template>
  2. <a-breadcrumb :routes="routes">
  3. <template slot="itemRender" slot-scope="{route, params, routes, paths}">
  4. <span v-if="routes.indexOf(route) === routes.length - 1">
  5. {{route.breadcrumbName}}
  6. </span>
  7. <router-link v-else :to="paths.join('/')">
  8. {{route.breadcrumbName}}
  9. </router-link>
  10. </template>
  11. </a-breadcrumb>
  12. </template>
  13. <script>
  14. export default {
  15. data() {
  16. return {
  17. routes: [
  18. {
  19. path: 'index',
  20. breadcrumbName: 'home',
  21. },
  22. {
  23. path: 'first',
  24. breadcrumbName: 'first',
  25. children: [
  26. {
  27. path: '/general',
  28. breadcrumbName: 'General',
  29. },
  30. {
  31. path: '/layout',
  32. breadcrumbName: 'Layout',
  33. },
  34. {
  35. path: '/navigation',
  36. breadcrumbName: 'Navigation',
  37. },
  38. ],
  39. },
  40. {
  41. path: 'second',
  42. breadcrumbName: 'second',
  43. },
  44. ],
  45. };
  46. },
  47. };
  48. </script>