FxBreadcrumb 面包屑

显示当前页面位置，方便用户快速返回上级页面。

基础用法

在 FxBreadcrumb 中使用 FxBreadcrumbItem 表示从首页开始的每一级。通过 separator 属性设置分隔符，默认为 '/'。

<FxBreadcrumb separator="/">
  <FxBreadcrumbItem :to="{ path: '/' }">首页</FxBreadcrumbItem>
  <FxBreadcrumbItem>活动管理</FxBreadcrumbItem>
  <FxBreadcrumbItem>活动列表</FxBreadcrumbItem>
  <FxBreadcrumbItem>活动详情</FxBreadcrumbItem>
</FxBreadcrumb>

图标分隔符

通过设置 separator-icon 可以使用图标作为分隔符，它将覆盖 separator 属性。值使用 FxIcon 图标名称。

<FxBreadcrumb separator-icon="ep:arrow-right">
  <FxBreadcrumbItem :to="{ path: '/' }">首页</FxBreadcrumbItem>
  <FxBreadcrumbItem>活动管理</FxBreadcrumbItem>
  <FxBreadcrumbItem>活动列表</FxBreadcrumbItem>
  <FxBreadcrumbItem>活动详情</FxBreadcrumbItem>
</FxBreadcrumb>

路由跳转

设置 to 属性后，该面包屑项变为可点击的链接，自动调用 router.push() 导航。配合 replace 属性可使用 router.replace() 不留下历史记录。

<FxBreadcrumb separator=">">
  <FxBreadcrumbItem :to="{ path: '/' }">首页</FxBreadcrumbItem>
  <FxBreadcrumbItem :to="{ path: '/components/fx-card' }">FxCard</FxBreadcrumbItem>
  <FxBreadcrumbItem>当前页</FxBreadcrumbItem>
</FxBreadcrumb>

自定义分隔符

通过 separator 属性设置任意字符作为分隔符。

<div class="space-y-4">
  <FxBreadcrumb separator=">">
    <FxBreadcrumbItem>首页</FxBreadcrumbItem>
    <FxBreadcrumbItem>系统管理</FxBreadcrumbItem>
    <FxBreadcrumbItem>用户管理</FxBreadcrumbItem>
  </FxBreadcrumb>
  <FxBreadcrumb separator="→">
    <FxBreadcrumbItem>首页</FxBreadcrumbItem>
    <FxBreadcrumbItem>权限管理</FxBreadcrumbItem>
    <FxBreadcrumbItem>角色管理</FxBreadcrumbItem>
  </FxBreadcrumb>
</div>

三角背景风格

通过设置 style-type="background" 可使用 三角背景面包屑。此风格下 separator 和 separator-icon 无效，箭头由 CSS 三角形自动生成。

<FxBreadcrumb style-type="background">
  <FxBreadcrumbItem :to="{ path: '/' }">首页</FxBreadcrumbItem>
  <FxBreadcrumbItem :to="{ path: '/components/fx-card' }">组件</FxBreadcrumbItem>
  <FxBreadcrumbItem>当前页</FxBreadcrumbItem>
</FxBreadcrumb>

API

FxBreadcrumb Attributes

属性名	说明	类型	默认值
separator	分隔符文字（仅 style-type="default" 生效）	string	/
separator-icon	图标分隔符名称，FxIcon name（仅 default 生效）	string	—
style-type	样式类型：default 支持分隔符；background 三角	'default' | 'background'	'default'

FxBreadcrumb Slots

插槽名	说明	子标签
default	自定义默认内容	Breadcrumb Item

FxBreadcrumbItem Attributes

属性名	说明	类型	默认值
to	目标路由链接，同 vue-router 的 to	string / RouteLocationRaw	''
replace	是否使用 replace 导航，不留下历史记录	boolean	false

FxBreadcrumbItem Slots

插槽名	说明
default	自定义默认内容