Breadcrumb 面包屑

显示当前页面的路径，快速返回之前的任意页面。

基础用法

在 ZcBreadcrumb 中使用 ZcBreadcrumbItem 标签表示从首页开始的每一级路径。

首页/组件/面包屑/

<template>
  <ZcBreadcrumb separator="/">
    <ZcBreadcrumbItem to="/">首页</ZcBreadcrumbItem>
    <ZcBreadcrumbItem to="/components">组件</ZcBreadcrumbItem>
    <ZcBreadcrumbItem>面包屑</ZcBreadcrumbItem>
  </ZcBreadcrumb>
</template>

自定义分隔符

通过 separator 属性自定义分隔符，也可以使用 separator-icon 设置图标分隔符。

首页>活动管理>活动详情>

首页-事件管理-事件列表-

<template>
  <ZcBreadcrumb separator=">">
    <ZcBreadcrumbItem>首页</ZcBreadcrumbItem>
    <ZcBreadcrumbItem>活动管理</ZcBreadcrumbItem>
    <ZcBreadcrumbItem>活动详情</ZcBreadcrumbItem>
  </ZcBreadcrumb>

  <ZcBreadcrumb separator="-" style="margin-top: 12px;">
    <ZcBreadcrumbItem>首页</ZcBreadcrumbItem>
    <ZcBreadcrumbItem>事件管理</ZcBreadcrumbItem>
    <ZcBreadcrumbItem>事件列表</ZcBreadcrumbItem>
  </ZcBreadcrumb>
</template>

Breadcrumb API

Props

参数	说明	类型	默认值
separator	分隔符	string	'/'
separatorIcon	分隔符图标类名	string	''

BreadcrumbItem Props

参数	说明	类型	默认值
to	跳转链接（路由路径或 URL）	string	''
replace	是否替换当前历史记录	boolean	false