el-breadcrumb 详解

el-breadcrumb 是 Element Plus 框架中的一个面包屑导航组件，用于显示当前页面的位置路径。它可以帮助用户快速了解当前位置，并可以方便地返回上级页面。

一。el-breadcrumb 属性详解

1. separator:

   • 用途: 分隔符，默认为 /。
   • 默认值: /

2. separator-class:

   • 用途: 自定义分隔符的类名。

二。 el-breadcrumb-item 属性详解

1. to:

   • 用途: 导航链接的目标路径，支持字符串和对象形式。

2. replace:

   • 用途: 是否在导航时不添加到历史记录。
   • 默认值: false

三。 el-breadcrumb 事件详解

1. click:

   • 用途: 点击面包屑项时触发的回调函数。
   • 参数: event（点击事件）

四。 el-breadcrumb 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 自定义面包屑项的内容。

五。实例

<template>
  <div>
    <h2>Breadcrumb 示例</h2>

    <!-- 基本用法 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/parent' }">父级页面</el-breadcrumb-item>
      <el-breadcrumb-item>当前页面</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 自定义分隔符 -->
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/parent' }">父级页面</el-breadcrumb-item>
      <el-breadcrumb-item>当前页面</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 自定义分隔符的类名 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/parent' }">父级页面</el-breadcrumb-item>
      <el-breadcrumb-item>当前页面</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 使用插槽自定义内容 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>
        <a href="/">首页</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/parent">父级页面</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <span>当前页面</span>
      </el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 不添加到历史记录 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }" replace>首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/parent' }" replace>父级页面</el-breadcrumb-item>
      <el-breadcrumb-item>当前页面</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>