witBreadcrumb 面包屑导航

witBreadcrumb 是一个基于 Element Plus 的智能面包屑导航组件，能够根据当前路由自动生成面包屑路径，支持图标显示和国际化，适用于需要清晰导航层级的管理系统。

用法实例

<template>
  <div class="app-container">
    <!-- 使用 witBreadcrumb 组件 -->
    <witBreadcrumb />
    
    <!-- 页面内容 -->
    <div class="page-content">
      <!-- 页面具体内容 -->
    </div>
  </div>
</template>

<script lang="ts" setup>
// 无需额外配置，组件会自动根据路由生成面包屑
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-content {
  flex: 1;
  padding: 20px;
}
</style>

API

组件

组件名	描述
witBreadcrumb	智能面包屑导航组件

属性

属性名	类型	默认值	描述
-	-	-	该组件无需配置属性，自动从路由生成数据

方法

方法名	描述	参数类型
-	-	-

事件

事件名	描述	参数
-	-	-

功能特性

自动路由解析

• 自动从 Vue Router 路由配置生成面包屑路径
• 支持嵌套路由结构
• 自动处理路由参数

图标支持

• 可在路由元信息中配置图标
• 使用 wit-icon 组件渲染图标
• 图标与文字水平对齐显示

国际化支持

• 集成 i18n 国际化功能
• 通过 translate 函数翻译路由标题
• 支持多语言切换

样式定制

• 基于 Element Plus 样式
• 自定义面包屑分隔符（默认 "/"）
• 可通过 CSS 变量调整高度和样式

TIP

1. 组件会自动忽略 meta.breadcrumbHidden 为 true 的路由项。
2. 确保在路由配置中为需要显示的路由项设置 meta.title 属性。
3. 如需显示图标，在路由 meta 中添加 icon 属性，值为图标名称。
4. 组件依赖 Vue Router 和 i18n 功能，使用前请确保已正确配置。
5. 面包屑项的点击行为由 Element Plus 的 el-breadcrumb-item 组件默认处理。