vue前端不通过路由实现面包屑功能，弹窗与弹窗之间不通过路由实现面包屑功能，二次封装element ui的面包屑breadcrumb，不使用路由实现面包屑功能效果

vue前端不通过路由如何在单个页面（弹窗）里实现多层级(上下级，父子级)页面弹窗在本页面（弹窗）实现上下级穿透跳转达到面包屑的效果（单页面或弹窗内部跳转）
//下面代码，复制即可用，所见即所得
对element ui 的面包屑breadcrumb进行二次封装，写成一个组件，你可以直接复制粘贴，就是一个完整的组件。

引入组件：

//父组件中引入

import Mybreadcrumb from "../mybreadcrumb.vue";

父组件中引入写上

<Mybreadcrumb
        v-model="innerPath"
        :label-args="{ title2: active.title2, title3: active.title3 }"
        :showInRoot="showInRoot"
        :path="{
          label: '财务报销费用',
          key: '1',
          children: [
            {
              label: '{title2}',//动态标题
              key: '2',
              children: [
                {
                  label: '{title3}', //动态标题
                  key: '3',
                },
              ],
            },
          ],
        }"
      ></Mybreadcrumb>

//这里需要引入需要跳转的子组件

<div style="height: calc(100% - 45px)">
      //一级页面
      <Indexpage
        v-if="innerPath == 1"
        @sentIndexFn="sentIndexFn"
        style="height: 100%"
      ></Indexpage> 
      //二级页面
      <Detail
        v-else-if="innerPath == 2"
        :detailData="detailData"
        style="height: 100%"
      ></Detail>
      //三级.....
    </div>

**参数配置**
data(){
 return{
  // 层级设置
      showInRoot: true,//是否显示第一个标题，是根节点
      innerPath: 1,
      active: { title2: "", title3: "" }, //这是动态标题，值可以在某件事件触发时，赋值
}

下面是组件

这里是组件html

<template >
  <div class="inner-breadcrumb" v-show="showInRoot || value!=root" style="height:40px;padding:0 15px;">
    <el-breadcrumb class="breadcrumb" separator=">" style="float:left;">
      <el-breadcrumb-item v-for="(node, index) in pathArr" :key="index" style="line-height:40px">
        <span v-if="node.disable && index<pathArr.length-1" class="disable" :class="{'last':index==pathArr.length-1}">{{parse(node.label)}}</span>
        <a v-else :class="{'last':index==pathArr.length-1}" href="javascript:;" @click="change(node.key,node.disable)">{{parse(node.label)}}</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-button v-if="showBack&&pathArr.length>1" style="float:right;padding:0;" type="text" @click="back">返回上一级</el-button>
  </div>
</template>

下面时组件参数及配置：

export default {
  name: "InnerBreadcrumb",
  props: {
    value: {
      type: String,
    },
    path: {
      type: Object,
      required: true,
      // 形如：
      default: {
        // label: "一级页面",
        // key: "1",
        // children: [
        //   {
        //     key: "2A",
        //     label: "二级页面A"
        //   },
        //   {
        //     key: "2B",
        //     label: "二级页面B",
        //     disable: true,
        //     children: [
        //       {
        //         key: "3",
        //         label: "三级页面"
        //       }
        //     ]
        //   }
        // ]
      }
    },
    showBack:{ // 是否显示返回上一级
      type: Boolean,
      default: false
    },
    showInRoot: { // 是否在根目录显示
      type: Boolean,
      default: false
    },
    labelArgs:{ // 用于回显的参数 例如在 label 中使用 '设置:{info}',在 labelArgs传入{info:'用户信息'} 即可
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      pathMap: null,
      root: null,
      pathArr: []
    };
  },
  watch: {
    value(val) {
      this.buildPath(val);
    }
  },
  methods: {
    init() {
      let path = this.path;
      this.root = path.key;
      let pathMap = {};
      // 遍历path树,给每个节点加上父节点的key，parentKey空则是根节点
      let traverse = (node, parentKey) => {
        node.parentKey = parentKey;
        pathMap[node.key] = node;
        if (node.children && node.children.length) {
          for (let i = 0; i < node.children.length; i++) {
            const child = node.children[i];
            traverse(child, node.key);
          }
        }
      };
      traverse(path);
      this.pathMap = pathMap;
    },
    buildPath(key) {
      if(!key)
        return;
      // 建立路径数组
      let node = this.pathMap[key];
      if (!node) {
        // console.warn("InnerBreadcrumb 找不到key:" + key);
        return;
      }
      let arr = [];
      while (node) {
        arr.push(node);
        node = this.pathMap[node.parentKey];
      }
      arr.reverse();
      this.pathArr = arr;
    },
    parse(label){
      const reg = /\{[^\}]+\}/g;
      let labelCopy = label; // 复制一份
      let match;
      /* match的值
        0: "{abc}"
        groups: undefined
        index: 3
        input: "123{abc},{b}"
      */
      while((match = reg.exec(label))!=null){
        let key = match[0].substr(1,match[0].length-2);
        let value = this.labelArgs[key];
        if (value){
          // console.warn('InnerBreadcrumb 找不到参数:', key);
          labelCopy = labelCopy.replace(match[0],value);
        }
      }
      return labelCopy;
    },
    change(key, disable) {
      if (disable) return;
      // console.log(key);
      this.$emit("input", key);
    },
    back(){
      if(this.pathArr && this.pathArr.length>1){
        for (let i = this.pathArr.length-2; i >=0; i--) {
          const node = this.pathArr[i];
          if (!node.disable){
            this.change(node.key);
            return;
          }
        }
      }
      console.warn('InnerBreadcrumb 没有非disalbe的上级路径');
    }
  },
  created() {},
  mounted() {
    this.init();
    this.buildPath(this.value);
  }
};

这里是组件样式，可更改

<style lang="scss">
:root .inner-breadcrumb {
  // background-color:#e8e8e8 ;
  .breadcrumb{
    span {
      font-weight: normal;
      color: #0D867F!important;
    }
    a {
      font-weight: normal;
      color: #0D867F!important;
      color: #0D867F!important;
    }
    a:hover{
      color: #3d9e99!important;
    }
    .last{
      font-weight: bold!important;
      cursor: default!important;
      color: #0D867F!important;
    }
    .disable{
      cursor: default!important;
      color: #0D867F!important;
    }
  }
  
}
</style>