vue 面包屑嵌套多级功能

//嵌套这么嵌套，路径的引入就不展示了 DDDD(懂得都懂)
//router.js页面
 {
    path: "/CourseDevelopment",
    component: index,
    redirect: '/CourseDevelopment/classliandong',
    meta: { title: "选择课程" },
    children: [
      {
        path: "classliandong",
        component: () => import("@/views/CourseDevelopment/classliandong"),
        meta: { title: "选择课程", show:true},
      },
      {
        path: "indexlink",
        component: indexlink, //重点：因为选择课程为一级课程列表为二级 课程信息为三级以此类推，当我们  想把二级套三级的情况下 这两及我们需要一个媒介去管理。下面会写出来。
        redirect: '/CourseDevelopment/indexlink/Classdevelop',
        meta: { title: "课程列表" },
        children: [
          {
            path: "Classdevelop",
            component: () => import("@/views/CourseDevelopment/Classdevelop"),
            // redirect: '/CourseDevelopment/Classdevelop/NewClass',
            meta: { title: "课程列表", show:true},
          },
          {
            path: "NewClass",
            component: () => import("@/views/CourseDevelopment/NewClass"),
            meta: { title: "课程信息" }
          }
        ]  
      },
    ]
  },

//面包屑组件页面
//bread.vue页面
<template>
  <div class="bread">
    <div class="example-container">
      当前位置：
      <el-breadcrumb separator=">">
        <transition-group name="breadcrumb">
          <el-breadcrumb-item v-for="(item, index) in breadList" :key="index">
            <span v-if="item.redirect==='home'||index==breadList.length-1" class="no-redirect">{{ item.meta.title }}</span>
            <a v-else @click.prevent="handleLink(item)" >{{ item.meta.title }}</a>
          </el-breadcrumb-item>
        </transition-group>
      </el-breadcrumb>
    </div>
  </div>
</template>

<script>
export default {
  name: "bread.vue",
  data() {
    return {
      breadList: [ ] // 路由集合
    };
  },
  watch: {
    $route(route) {
      if (route.path.startsWith('/redirect/')) {
        return
      }
      this.getBreadcrumb();
    }
  },
  methods: {
     pathCompile(path) {
      const { params } = this.$route
      const pathToRegexp = require('path-to-regexp');
      var toPath = pathToRegexp.compile(path)
      return toPath(params)
    },
    handleLink(item) {
      const { redirect, path } = item
      if (redirect) {
        this.$router.push(redirect)
        return
      }
      this.$router.push(this.pathCompile(path))
    },
    isHome(route) {
      return route.name === "home";
    },
    getBreadcrumb() {
      const res_data = new Map()
      let matched = this.$route.matched;
      if (matched[0].path === "" && matched[1].path === "/home") {
        matched = [{ path: "/", meta: { title: "首页" } }];
      } else {
        matched = [{ path: "/", meta: { title: "首页" } }].concat(matched);
        this.breadList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
        let list =  this.breadList.filter((arr) => !res_data.has(arr.meta.title) && res_data.set(arr.meta.title, 1))
        console.log(list)
        this.breadList = list
        return
      }

      this.breadList = matched;
    }
  },
  mounted() {
    this.getBreadcrumb();
  }
};
</script>

<style lang="scss" scoped>
.bread ::v-deep .el-breadcrumb {
  display: inline-block;
  position: relative;
  top: 2px;
}
.bread ::v-deep .is-link {
  font-weight: normal;
}
.bread {
  float: left;
  width: 100%;
  height: 15px;
  font-size: 14px;
  color: #999;
  line-height: 15px;
}


</style>

//index.vue 这是路由重点indexlink的页面
<template>
   <div>
       <router-view></router-view>
   </div>
</template>

<script>
export default {

}
</script>

<style>

</style>