显示当前页面在系统层级结构中的位置，并能向上返回。
何时使用
当系统拥有超过两级以上的层级结构时；
当需要告知用户『你在哪里』时；
当需要向上导航的功能时。
案例：面包屑导航基本使用
核心代码：
<template><a-breadcrumb><a-breadcrumb-item>Home</a-breadcrumb-item><a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item><a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item><a-breadcrumb-item>An Application</a-breadcrumb-item></a-breadcrumb>
</template>
vue3示例：
<script setup>
</script>
<template><a-breadcrumb><a-breadcrumb-item>首页</a-breadcrumb-item><a-breadcrumb-item><a href="#">数据分析平台</a></a-breadcrumb-item><a-breadcrumb-item>销量分析</a-breadcrumb-item></a-breadcrumb>
</template>
案例：带下拉菜单的面包屑
面包屑支持下拉菜单。
核心代码：
<template><a-breadcrumb><a-breadcrumb-item>Ant Design Vue</a-breadcrumb-item><a-breadcrumb-item><a href="">Component</a></a-breadcrumb-item><a-breadcrumb-item><a href="">General</a><template #overlay><a-menu><a-menu-item><a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">General</a></a-menu-item><a-menu-item><a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">Layout</a></a-menu-item><a-menu-item><a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">Navigation</a></a-menu-item></a-menu></template></a-breadcrumb-item><a-breadcrumb-item>Button</a-breadcrumb-item></a-breadcrumb>
</template>
vue3示例：
<script setup>
</script>
<template><a-breadcrumb><a-breadcrumb-item>首页</a-breadcrumb-item><a-breadcrumb-item><a href="#">数据分析平台</a><template #overlay><a-menu><a-menu-item><a href="#">选项1</a></a-menu-item><a-menu-item><a href="#">选项2</a></a-menu-item><a-menu-item><a href="#">选项3</a></a-menu-item></a-menu></template></a-breadcrumb-item><a-breadcrumb-item>销量分析</a-breadcrumb-item></a-breadcrumb>
</template>
案例：分隔符
用separator=">"可以自定义分隔符，或者使用slot="separator"自定义更复杂的分隔符。
核心代码：
<template><a-breadcrumb separator=">"><a-breadcrumb-item>Home</a-breadcrumb-item><a-breadcrumb-item href="">Application Center</a-breadcrumb-item><a-breadcrumb-item href="">Application List</a-breadcrumb-item><a-breadcrumb-item>An Application</a-breadcrumb-item></a-breadcrumb><a-breadcrumb><template #separator><span style="color: red">></span></template><a-breadcrumb-item>Home</a-breadcrumb-item><a-breadcrumb-item href="">Application Center</a-breadcrumb-item><a-breadcrumb-item href="">Application List</a-breadcrumb-item><a-breadcrumb-item>An Application</a-breadcrumb-item></a-breadcrumb>
</template>
vue3示例：
<template><a-breadcrumb separator=">"><a-breadcrumb-item>首页</a-breadcrumb-item><a-breadcrumb-item href="#">数据分析平台</a-breadcrumb-item><a-breadcrumb-item>销量分析</a-breadcrumb-item></a-breadcrumb>
</template>
案例：分隔符2
用separator=">"可以自定义分隔符，或者使用slot="separator"自定义更复杂的分隔符。
核心代码：
<template><a-breadcrumb><template #separator><span style="color: red">></span></template><a-breadcrumb-item>Home</a-breadcrumb-item><a-breadcrumb-item href="">Application Center</a-breadcrumb-item><a-breadcrumb-item href="">Application List</a-breadcrumb-item><a-breadcrumb-item>An Application</a-breadcrumb-item></a-breadcrumb>
</template>
vue3示例：
<template><a-breadcrumb><template #separator><span class="text-red-500"> > </span></template><a-breadcrumb-item>首页</a-breadcrumb-item><a-breadcrumb-item href="#">数据分析平台</a-breadcrumb-item><a-breadcrumb-item>销量分析</a-breadcrumb-item></a-breadcrumb>
</template>
案例：图标
图标放在文字前面。
核心代码：
<template><a-breadcrumb><a-breadcrumb-item href=""><home-outlined /></a-breadcrumb-item><a-breadcrumb-item href=""><user-outlined /><span>Application List</span></a-breadcrumb-item><a-breadcrumb-item>Application</a-breadcrumb-item></a-breadcrumb>
</template>
<script lang="ts" setup>
import { HomeOutlined, UserOutlined } from '@ant-design/icons-vue';
</script>
vue3示例：
<script setup>
import {HomeOutlined, UserOutlined} from "@ant-design/icons-vue"
</script>
<template><a-breadcrumb><template #separator><span class="text-red-500"> > </span></template><a-breadcrumb-item><HomeOutlined/>首页</a-breadcrumb-item><a-breadcrumb-item href="#"><UserOutlined/>数据分析平台</a-breadcrumb-item><a-breadcrumb-item>销量分析</a-breadcrumb-item></a-breadcrumb>
</template>
属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| itemRender | 自定义链接函数，和 vue-router 配置使用， 也可使用 #itemRender=“props” | ({route, params, routes, paths}) => vNode | - | |
| params | 路由的参数 | object | - | |
| routes | router 的路由栈信息 | [routes] | - | |
| separator | 分隔符自定义 | string|slot | ‘/’ |
item 属性
| 参数 | 参数 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| href | 链接的目的地 | string | - | 1.5.0 |
| overlay | 下拉菜单的内容 | Menu | () => Menu | - | 1.5.0 |
事件
| 事件名称 | 说明 | 回调参数 | 版本 | |
|---|---|---|---|---|
| click | 单击事件 | (e:MouseEvent)=>void | - | 1.5.0 |
)