Breadcrumb 面包屑

面包屑导航组件，根据当前路由自动生成导航路径。

🎯 在线体验：登录 https://vue.youlai.tech 后，页面顶部自动显示面包屑导航。

功能特性

• 🔗 自动生成 - 根据当前路由自动生成面包屑
• 🏠 首页链接 - 首项默认为首页链接
• 🎯 路由跳转 - 点击面包屑项可跳转到对应页面
• 🌍 国际化 - 支持多语言显示

基础用法

组件已集成在布局中，无需手动引入：

<template>
  <div class="navbar">
    <Breadcrumb />
  </div>
</template>

路由配置

在路由的 meta 中配置面包屑相关属性：

{
  path: '/system/user',
  name: 'User',
  component: () => import('@/views/system/user/index.vue'),
  meta: {
    title: '用户管理',      // 面包屑显示的标题
    breadcrumb: true,       // 是否显示在面包屑中（默认 true）
    activeMenu: '/system'   // 高亮的菜单路径
  }
}

配置项说明

配置项	类型	默认值	说明
title	string	-	面包屑显示的标题
breadcrumb	boolean	true	是否显示在面包屑中
activeMenu	string	-	高亮的菜单路径

隐藏面包屑

设置 breadcrumb: false 可以隐藏某个路由在面包屑中的显示：

{
  path: '/system/user/detail/:id',
  meta: {
    title: '用户详情',
    breadcrumb: false  // 不显示在面包屑中
  }
}

样式定制

// 自定义面包屑样式
:deep(.el-breadcrumb) {
  .el-breadcrumb__item {
    .el-breadcrumb__inner {
      color: var(--el-text-color-regular);
      
      &:hover {
        color: var(--el-color-primary);
      }
    }
    
    &:last-child {
      .el-breadcrumb__inner {
        color: var(--el-text-color-primary);
        font-weight: 500;
      }
    }
  }
}

注意事项

1. 路由层级：面包屑根据路由的嵌套层级自动生成
2. 标题配置：确保每个路由都配置了 meta.title
3. 国际化：标题支持国际化 key，如 route.user

相关链接

• 路由和菜单
• 布局系统