已实现功能

1. 通过配置进行面包屑关系绑定
2. 可以动态修改名称，显示隐藏，以及跳转路径

使用步骤

// 安装
npm i bread-tool

// 使用
// 配置文件(根据具体路径引用)
import breadTree from '../src/plugin/breadTree'
import bread from "bread-tool";

<bread ref="breadRef" :breadTree="breadTree"></bread>

export default {
  components: {
    bread,
  },
  mounted() {
    // 建议储存组件引用，方便后续调用组件方法
    this.$store.commit("setBreadRef", this.$refs.breadRef);
    ...
  },
  data() {
    return {
      breadTree,
      ...
    };
  },
};

配置文件

const breadTree = [
  {
    name: "aaa", // 面包屑显示名字
    path: "/aaa", // 对应的路由路径,只能是完整路径，也就是访问此页面$route.path的值（也是唯一主键不可重复，不可动态修改）
    isShow: true, // 显示或隐藏此级面包屑（不配置默认值为true）
    fullPath: "", // 此属性为空时，跳转路径为path，不为空时此属性为跳转路径（方便后续业务添加参数，或自定义等）（不配置默认为空）
    children: [
      {
        name: "bbb",
        path: "/bbb",
        children: [
          {
            name: "eee",
            path: "/eee",
          },
        ],
      },
    ],
  },
  {
    name: "ccc",
    path: "/ccc",
    children: [
      {
        name: "ddd",
        path: "/ddd/:id", // 带路由参数的情况
      },
    ],
  },
];

export default breadTree;

组件方法

| 方法名 | 入参 | 出参 | 说明 | | ----------- | ---------------------------------------------------- | ---- | ------------------------------ | | setPathName | path:String 路由路径，name:String 名称 | - | 设置对应面包屑的名称 | | setPathShow | path:String 路由路径，isShow:String 显示标识 | - | 设置对应面包屑的显示 | | setFullPath | path:String 路由路径，fullPath:String 自定义跳转路径 | - | 设置对应面包屑的自定义跳转路径 |