Breadcrumb动态面包屑（全路径方案+非全路径方案）

Breadcrumb动态面包屑

1.只展示第一级和最后一级（非全路径）

<template>
  <div class="crumbs-content">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="(item, index) in levelList" :key="index">{{
        item.meta.title
      }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      levelList: [],
    };
  },
  watch: {
    $route() {
      this.setTitle();
    },
  },
  mounted() {
    console.log(this.levelList, "mounted");
    console.log("路由信息", this.$route.matched);
    this.getBreadcrumb();
    this.setTitle();
  },
  methods: {
    getBreadcrumb() {
      // 这里做一个筛选，如果有title，则进行显示
      let matched = this.$route.matched.filter(
        (item) => item.meta && item.meta.title
      );
      console.log(matched, "matched");
      // 这里是为了将首页插入到面包屑中
      const first = matched[0];
      if (!this.isindex(first)) {
        matched = [{ path: "/", meta: { title: "首页" } }].concat(matched);
      }
      // 这里把路由信息加入到数组中
      this.levelList = matched.filter(
        (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
      );
    },
    setTitle() {
      let resourceName = this.$route.query.resourceName;
      if (resourceName) {
        let i = this.levelList.length - 1;
        this.levelList[i] = {
          meta: {
            title: resourceName,
          },
        };
      }
    },

    isindex(route) {
      const name = route && route.name;
      if (!name) {
        return false;
      }
      return name.trim() === "index";
    },
  },
};
</script>

<style lang="scss" scoped>
.crumbs-content {
  :deep(.ant-breadcrumb-separator) {
    margin: 0 4px;
  }
  .allow {
    color: #90b9e1;
    cursor: pointer;

    &:hover {
      color: #b4d4f4;
    }
  }
}
</style>

在组件中使用

<Crumbs />
import Crumbs from "@/components/xxx.vue";
components: {
    Crumbs,
 },

路由配置

 {
    path: "/flyPlan",
    name: "flyPlan",
    meta: {
      title: "计划",
    },
    components: {
      header: HeaderCom,
      default: () => import("@/views/dispatch/flyPlan.vue"),
    },
  },

2.展示全路径

<template>
  <div class="crumbs-content">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <template v-for="(item, index) in levelList">
        <el-breadcrumb-item :key="'item_'+index">
          {{ item.name }}
        </el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data () {
    return {
      levelList: [],
    };
  },
  watch: {
    $route () {
      this.getBreadcrumb();
      this.setTitle();
    },
  },
  mounted () {
    console.log(this.levelList, "mounted");
    console.log("路由信息", this.$route.matched);
    this.getBreadcrumb();
    this.setTitle();
  },
  methods: {
    getBreadcrumb () {
      if (this.$route.meta && this.$route.meta.crumbs) {
        this.levelList = this.$route.meta.crumbs;
      }
    },
    setTitle () {
      let resourceName = this.$route.query.resourceName;
      if (resourceName) {
        let i = this.levelList.length - 1;
        this.levelList[i] = {
          meta: {
            title: resourceName,
          },
        };
      }
    },

    isindex (route) {
      const name = route && route.name;
      if (!name) {
        return false;
      }
      return name.trim() === "index";
    },
  },
};
</script>

<style lang="scss" scoped>
.crumbs-content:deep {
  padding: 16px 0;
  .el-breadcrumb {
    font-size: 18px;
  }
  .el-breadcrumb__inner {
    font-weight: normal;
    color: #90b9e1;
  }
  .el-breadcrumb__inner.is-link {
    cursor: pointer;
    color: #cce5fd;
  }
  .el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color: rgba(28, 245, 252, 1);
  }
}
</style>

路由配置

  {
    path: "/flyPlan",
    name: "flyPlan",
    meta: {
      title: "计划",
      crumbs: [{ path: "", name: "计划" }],
    },
    components: {
      header: HeaderCom,
      default: () => import("@/views/dispatch/flyPlan.vue"),
    },
  },