vue 管理系统面包屑实现

效果截图：

问题所在：vue配置面包屑  由于详情页面不是上一级页面的子页面，因此不能得到关系去直接实现

 

实现方式：

1.通过store，把访问url直接保存去实现

问题所在：直接通过详情url会得不到上一级的url 面包屑会出现问题

2.通过url去匹配完整面包屑

例如：

首页：'/center'

流程:'/center/todoProcess'

详情：'/center/todoProcess/details'

实现代码

export default{
    data(){
        return{
             routerArr: [],
             nowRouters: this.getRoutes() //此路由的集合
        }
    },
    methods:{
    // 当前路由集合
    getRoutes() {
      return this.$router.options.routes.find(
        item => item.name == this.$route.path.split("/")[1]
      ).children;
    },
    //路由判断
    getBreadcrumb() {
      this.defaultRoute = this.$route.path;
      let nowArr = this.defaultRoute.split("/");
      this.routerArr = [];
      this.routerArr.push(this.getRouter(nowArr.slice(0, 3).join("/")));

      /**
       * 判断是否在查看详情页面  处理菜单节点高亮
       * @this.defaultRoute.split("/").length
       * 长度为4  则为查看详情页面
       * 长度为2  则为首页
       * 其他长度  正常访问
       */
      if (nowArr.length >= 4) {
        this.routerArr = [];

        // 处理菜单节点高亮
        this.defaultRoute = this.defaultRoute
          .split("/")
          .slice(0, 3)
          .join("/");

        // 处理面包屑
        for (let i = 0; i < nowArr.length - 2; i++) {
          let o = this.getRouter(
            nowArr.slice(0, i + 3).join("/"),
            i + 3 >= nowArr.length ? false : true
          );
          this.routerArr.push(o);
        }
      } else if (nowArr.length == 2) {
        this.routerArr = [];
        this.defaultRoute = "/center/home";
        this.routerArr.push(this.getRouter(this.defaultRoute));
      }

      /**
       * 根据url 获取面包屑
       *@rowPath 当前路由
       *@state 当前路由是否输出（最后一个路由不输出或者除了首页只为一个的情况下）
       * **/
    },
    // 获取到当前的路由信息值
    getRouter(rowPath, state = false) {
      // 当前模块的所有路由
      let nowObj = {};
      this.nowRouters.filter(item => {
        if (item.path == rowPath) {
          nowObj = {
            path: state ? item.path : "",
            title: item.meta.title
          };
        }
      });
      return nowObj;
    },
    },
    watch: {
      $route() {
        this.getBreadcrumb();
      }
  }
}

html

        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">
            <span>首页</span>
          </el-breadcrumb-item>

          <el-breadcrumb-item v-for="(item,index) in routerArr" :key="index" :to="item.path">
            <span style="color:#4481D8">{{item.title}}</span>
          </el-breadcrumb-item>
        </el-breadcrumb>