面包屑组件 (Breadcrumb)

Element UI 的 Breadcrumb 面包屑组件用于显示当前页面的路径，并且提供快速返回之前的任意页面的功能。面包屑组件通常在页面顶部使用，以清晰展示用户的导航路径。

提示

Breadcrumb 面包屑组件官方文档：https://element.eleme.cn/#/zh-CN/component/breadcrumb (opens new window)

1. 基本用法

基本语法：通过 <el-breadcrumb> 和 <el-breadcrumb-item> 标签构建面包屑导航。面包屑项之间的分隔符可以通过 separator 或 separator-class 属性自定义。

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
    <el-breadcrumb-item to="/category">分类</el-breadcrumb-item>
    <el-breadcrumb-item>详情</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  // 组件逻辑
};
</script>

• <el-breadcrumb>：用于定义整个面包屑导航容器。
• <el-breadcrumb-item>：用于定义面包屑导航中的每一项，可以通过 to 属性指定跳转的路由路径。
• 

2. Breadcrumb 属性

参数	说明	类型	可选值	默认值
separator	分隔符字符串	string	—	'/'
separator-class	图标分隔符的类名	string	—	—

• separator 属性：定义面包屑项之间的分隔符，默认值是斜杠 '/'。你可以通过设置这个属性为其他字符串来更改分隔符。

• separator-class 属性：通过类名来自定义分隔符图标。例如，你可以使用 el-icon-arrow-right 来使用向右箭头作为分隔符。

  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
    <el-breadcrumb-item to="/category">分类</el-breadcrumb-item>
    <el-breadcrumb-item>详情</el-breadcrumb-item>
  </el-breadcrumb>
  

3. Breadcrumb Item 属性

参数	说明	类型	可选值	默认值
to	路由跳转对象，同 vue-router 的 to	string/object	—	—
replace	在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录	boolean	—	false

• to 属性：定义跳转的路由对象。该属性的用法和 vue-router 的 to 属性一致，可以是路径字符串或路由对象。

• replace 属性：如果设置为 true，在导航到新路由时不会在浏览器历史记录中添加新记录，而是替换掉当前的记录。

  <el-breadcrumb>
    <el-breadcrumb-item :to="{ path: '/', replace: true }">首页</el-breadcrumb-item>
    <el-breadcrumb-item to="/category">分类</el-breadcrumb-item>
    <el-breadcrumb-item>详情</el-breadcrumb-item>
  </el-breadcrumb>
  

4. 面包屑组件常用示例

1. 基础用法

基础的面包屑导航使用斜杠作为分隔符，并且为每一个导航项设置了跳转路径。

<el-breadcrumb separator="/">
  <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
  <el-breadcrumb-item to="/products">产品</el-breadcrumb-item>
  <el-breadcrumb-item>详情</el-breadcrumb-item>
</el-breadcrumb>

2. 自定义分隔符

通过 separator-class 属性自定义分隔符为右箭头图标。

<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
  <el-breadcrumb-item to="/category">分类</el-breadcrumb-item>
  <el-breadcrumb-item>详情</el-breadcrumb-item>
</el-breadcrumb>

3. 使用路由对象

通过 to 属性传入路由对象，并使用 replace 进行路由跳转时不会添加新记录。

<el-breadcrumb>
  <el-breadcrumb-item :to="{ path: '/', replace: true }">首页</el-breadcrumb-item>
  <el-breadcrumb-item to="/products">产品</el-breadcrumb-item>
  <el-breadcrumb-item>详情</el-breadcrumb-item>
</el-breadcrumb>

5.面包屑组件示例

<template>
  <div class="manager-header-center">
    <!-- 使用 Element UI 的面包屑组件显示导航路径 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <!-- 首页链接 -->
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <!-- 当前路由的名称 -->
      <el-breadcrumb-item :to="{ path: $route.path }">{{ $route.meta.name }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

• $route.path 用于动态获取当前路由路径，$route.meta.name 显示当前路由的名称。
• 通过这种导航式跳转路，由如果相同会报错在vueRouter加入以下代码即可解决

// 保存 VueRouter 原始的 push 方法
const originalPush = VueRouter.prototype.push;

// 重写 VueRouter 的 push 方法
VueRouter.prototype.push = function push(location) {
  // 调用原始的 push 方法，并捕获返回的 Promise 的错误
  return originalPush.call(this, location).catch(err => err);
};