Breadcrumb 面包屑

面包屑用于显示当前页面在系统层级中的位置，帮助用户快速返回之前的任意页面。VISTA B 直接使用 Element Plus 的 el-breadcrumb，样式沿用组件库，适合详情页、配置页、项目管理页等有清晰层级关系的场景。

基础用法

在 el-breadcrumb 中使用 el-breadcrumb-item 表示从首页开始的每一级。通过 separator 设置分隔符，默认分隔符为 /。

组件总览/布局规范/导航组件/Breadcrumb 面包屑/

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>
    <a href="/">项目管理</a>
  </el-breadcrumb-item>
  <el-breadcrumb-item>项目列表</el-breadcrumb-item>
  <el-breadcrumb-item>项目详情</el-breadcrumb-item>
</el-breadcrumb>

图标分隔符

设置 separator-icon 后，可以使用图标作为分隔符；它会覆盖 separator 的文本分隔符。

首页项目管理报价单报价明细

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
</script>

<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>项目管理</el-breadcrumb-item>
    <el-breadcrumb-item>报价单</el-breadcrumb-item>
    <el-breadcrumb-item>报价明细</el-breadcrumb-item>
  </el-breadcrumb>
</template>

可跳转层级

给 el-breadcrumb-item 设置 to 后，该层级会作为路由入口。最后一级通常表示当前页面，不建议设置跳转。

Vista B/组件/Navigation 导航/

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item :to="{ path: '/projects' }">项目管理</el-breadcrumb-item>
  <el-breadcrumb-item>项目详情</el-breadcrumb-item>
</el-breadcrumb>

替换历史记录

设置 replace 后，点击面包屑跳转时不会向浏览器历史记录中追加新记录，适合不希望用户通过后退键回到中间态页面的场景。

首页/组件/Breadcrumb 面包屑/

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }" replace>首页</el-breadcrumb-item>
  <el-breadcrumb-item :to="{ path: '/projects' }" replace>项目管理</el-breadcrumb-item>
  <el-breadcrumb-item>项目详情</el-breadcrumb-item>
</el-breadcrumb>

API

Breadcrumb 属性

属性	说明	类型	默认值
separator	分隔符	string	/
separator-icon	图标分隔符的组件或组件名	string / Component	空

Breadcrumb 插槽

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

BreadcrumbItem 属性

属性	说明	类型	默认值
to	路由跳转目标，同 vue-router 的 to 属性	string / object	''
replace	是否在跳转时替换当前历史记录	boolean	false

BreadcrumbItem 插槽

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