Breadcrumb 面包屑

显示当前页面在系统层级中的位置，并提供向上导航能力。

何时使用

• 系统层级 ≥ 3 级时辅助用户定位。
• 详情页头部展示 "返回路径"，支持多级跳转回。

基本使用

最常见的写法：用一组 <c-breadcrumb-item> 组合，最末一级是当前页（不带链接）。

用 routes 数据驱动

适合从路由表 / 后端响应直接生成路径。routes[i].href 提供链接，routes[i].breadcrumbName 提供文字；最末一项不渲染为 <a>。

自定义分隔符

separator 可以是任意字符串。

单项自定义分隔符

某项的 separator 属性会覆盖整组的分隔符。

用 #separator 插槽

用 slot 写自定义分隔符，可以放图标 / SVG / 文字组合。

配合按钮

面包屑右侧常和操作按钮并列，可用 flex 布局。

API

Breadcrumb Props

参数	类型	默认值	说明
separator	string	'/'	分隔符
routes	BreadcrumbRoute[]	[]	路由数据，提供时优先于默认插槽

BreadcrumbRoute

字段	类型	说明
breadcrumbName	string	显示文本
title	string	breadcrumbName 的别名
href	string	链接地址
path	string	链接地址（兼容字段，与 href 等价）

BreadcrumbItem Props

参数	类型	默认值	说明
href	string	''	设置后整项渲染为 <a>
separator	string	''	单项级别覆盖父级 separator

BreadcrumbItem Slots

名称	说明
default	内容
separator	自定义分隔符（覆盖字符形式）