vuequanxain/src/components/mybread/MyBread.vue

<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">Dashboard</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, index) in levelList" :key="index">{{
        item.meta.name
      }}</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- <div v-for="(item,index) in levelList">
        {{item.path}}
    </div> -->
  </div>
</template>
<script>
import { mapMutations } from "vuex";
export default {
  name: "my-bread",
  props: {
    tableData: {
      type: Array,
      require: true,
      default: function () {
        return [];
      },
    },
  },

  data() {
    return {
      levelList: [],
    };
  },

  methods: {
    ...mapMutations(["CURRENT_MENU"]),
    getBreadcrumb() {
      let matched = this.$route.matched.filter((item) => item.name);
      matched.splice(0, 1);
      // const first = matched[0];
      // if (
      //   first &&
      //   first.name.trim().toLocaleLowerCase() !==
      //     "Dashboard".toLocaleLowerCase()
      // ) {
      //   matched = [{ path: "/home", meta: { name: "dashboard" } }].concat(
      //     matched
      //   );
      //   console.log(matched, "gaijian");
      // }
      this.levelList = matched;
    },
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    },
  },
  created() {
    this.getBreadcrumb();
  },
};
</script>

<style lang="scss" scoped>
</style>