详细分析el-breadcrumb 面包屑的基本知识（附Demo）

前言

基本的知识推荐阅读：面包屑导航（Breadcrumb）

1. 基本知识

el-breadcrumb 是 Element Plus 中的面包屑导航组件，主要用于展示当前页面在整个应用程序中的位置，并提供导航功能

面包屑通常用于提高用户体验，尤其是在多层级的页面结构中，让用户更容易理解其当前所在的位置并能够快速返回上级页面

• el-breadcrumb：面包屑的容器组件
• el-breadcrumb-item：面包屑中的每一项，通常用于指向特定页面

其中属性有如下：separator：自定义分隔符，默认为 /，可以设置为其他符号，如 > 或 |

常用场景可以用于：

1. 多层级页面导航：在复杂应用中，比如管理系统，可以使用面包屑展示层级结构
2. 用户定位：帮助用户识别当前所处的位置，尤其是在较深的页面结构中
3. 快速导航：用户可以通过点击面包屑的项快速返回上级页面

2. Demo

基本的用法如下：

<el-breadcrumb separator="/">
  <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
  <el-breadcrumb-item to="/module1">模块1</el-breadcrumb-item>
  <el-breadcrumb-item to="/module2">模块2</el-breadcrumb-item>
  <el-breadcrumb-item to="/module3">模块3</el-breadcrumb-item>
</el-breadcrumb>

或者使用动态的方式：

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index" :to="item.path">{
   
   { item.name }}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      breadcrumbItems: [
        {
      
       name: '首页', path: '/' },
        {
      
       name: '模块1', path: '/module1' },
        {
      
       name: '模块2', path: '/module2' },
        {
      
       name: '模块3', path: '/module3' }
      ]
    };
  }
};
</script>

总体截图如下：

如果需要自定义的分隔符，可以使用如下代码模块：

<el-breadcrumb :separator="arrow">
  <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
  <el-breadcrumb-item to="/module1">模块1</el-breadcrumb-item>
  <el-breadcrumb-item to="/module2">模块2</el-breadcrumb-item>
</el-breadcrumb>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      arrow: '>'
    };
  }
};
</script>

截图如下：

如果使用slot 自定义内容

<el-breadcrumb separator="/">
  <el-breadcrumb-item to="/">
    <span style="color: red;">首页</span>
  </el-breadcrumb-item>
  <el-breadcrumb-item to="/module1">模块1</el-breadcrumb-item>
  <el-breadcrumb-item to="/module2">模块2</el-breadcrumb-item>
</el-breadcrumb>

截图如下：