fe-manage/src/components/BreadCrumb.vue

<template>
  <div class="breadcrumb">
    <div style="margin-left: 21px">
      <a-breadcrumb>
        <a-breadcrumb-item v-for="(value, index) in list" :key="index">
          <router-link
            :to="value.href ? value.href : ''"
            :style="{ display: value.href ? 'inline-block' : 'none' }"
            >{{ value.name }}</router-link
          >
          <span :style="{ display: value.href ? 'none' : 'inline-block' }">{{
            value.name
          }}</span>
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, watch } from "vue";
import { useRoute } from "vue-router";
export default {
  name: "BreadCrumb",
  setup() {
    const state = reactive({
      list: [],
    });

    const route = useRoute();
    watch(
      () => route.fullPath,
      (n, o) => {
        // console.log("监听路由");
        console.log("new:" + n + ",old:" + o);

        if (
          n.indexOf("/learningpath") !== -1 ||
          n.indexOf("/LearningPath") !== -1
        ) {
          state.list = [
            {
              name: "学习路径图",
              href: "",
              // href: "#/coursewaremanage",
            },
          ];
        }
        if (n.indexOf("/leveladd") !== -1 || n.indexOf("/LevelAdd") !== -1) {
          state.list = [
            {
              name: "学习路径图",
              href: "/learningpath",
            },
            {
              name: "管理",
            },
          ];
        }
        if (
          n.indexOf("/leveladddetail") !== -1 ||
          n.indexOf("/LevelAddDetail") !== -1
        ) {
          state.list = [
            {
              name: "学习路径图",
              href: "/learningpath",
            },
            {
              name: "管理",
              href: "/leveladd",
            },
            {
              name: "管理",
            },
          ];
        }
        if (
          n.indexOf("/levelcheck") !== -1 ||
          n.indexOf("/LevelCheck") !== -1
        ) {
          state.list = [
            {
              name: "学习路径图",
              href: "/learningpath",
            },
            {
              name: "管理",
              href: "/leveladd",
            },
            {
              name: "查看",
            },
          ];
        }
        if (
          n.indexOf("/projectmanage") !== -1 ||
          n.indexOf("/ProjectManage") !== -1
        ) {
          state.list = [
            {
              name: "项目中心",
              href: "",
              // href: "#/coursewaremanage",
            },
            {
              name: "项目",
              href: "",
            },
          ];
        }
        if (
          n.indexOf("/projectadd") !== -1 ||
          n.indexOf("/ProjectAdd") !== -1
        ) {
          state.list = [
            {
              name: "项目",
              href: "/projectmanage",
            },
            {
              name: "创建项目",
            },
          ];
        }
        if (n.indexOf("/taskpage") !== -1 || n.indexOf("/TaskPage") !== -1) {
          state.list = [
            {
              name: "项目",
              href: "",
            },
            {
              name: "基础信息",
            },
          ];
        }
        if (n.indexOf("/taskadd") !== -1 || n.indexOf("/TaskAdd") !== -1) {
          state.list = [
            {
              name: "项目",
              href: "",
            },
            {
              name: "基础信息",
            },
            {
              name: "任务",
            },
            {
              name: "添加任务",
            },
          ];
        }
        if (
          n.indexOf("/templatelibrary") !== -1 ||
          n.indexOf("/TemplateLibrary") !== -1
        ) {
          state.list = [
            {
              name: "项目中心",
            },
            {
              name: "模板库",
            },
          ];
        }
        if (
          n.indexOf("/libraryadd") !== -1 ||
          n.indexOf("/LibraryAdd") !== -1
        ) {
          state.list = [
            {
              name: "项目中心",
            },
            {
              name: "模板库",
            },
            {
              name: "查看",
              href: "/libraryadd",
            },
          ];
        }
        if (
          n.indexOf("/coursemanage") !== -1 ||
          n.indexOf("/CourseManage") !== -1
        ) {
          state.list = [
            {
              name: "课程库",
              href: "",
              // href: "#/coursewaremanage",
            },
            {
              name: "课件管理",
              href: "",
            },
          ];
        }
        if (
          n.indexOf("/coursewaremanage") !== -1 ||
          n.indexOf("/CoursewareManage") !== -1
        ) {
          state.list = [
            {
              name: "课程库",
            },
            {
              name: "面授管理",
            },
          ];
        }
        if (
          n.indexOf("/researchmanage") !== -1 ||
          n.indexOf("/ResearchManage") !== -1
        ) {
          state.list = [
            {
              name: "评估管理",
              href: "",
              // href: "#/researchmanage",
            },
          ];
        }
        if (
          n.indexOf("/managepage") !== -1 ||
          n.indexOf("/ManagePage") !== -1
        ) {
          state.list = [
            {
              name: "评估管理",
              href: "",
              // href: "#/researchmanage",
            },
            {
              name: "管理",
            },
          ];
        }

        if (
          n.indexOf("/researchadd") !== -1 ||
          n.indexOf("/ResearchAdd") !== -1
        ) {
          state.list = [
            {
              name: "评估管理",
              href: "",
              // href: "#/researchmanage",
            },
            {
              name: "创建评估",
            },
          ];
        }

        if (
          n.indexOf("/certificatecenter") !== -1 ||
          n.indexOf("/CertificateCenter") !== -1
        ) {
          state.list = [
            {
              name: "证书中心",
            },
          ];
        }
        if (
          n.indexOf("/systemmanage") !== -1 ||
          n.indexOf("/SystemManage") !== -1
        ) {
          state.list = [
            {
              name: "系统管理",
            },
          ];
        }
        if (
          n.indexOf("/coursereviewed") !== -1 ||
          n.indexOf("/CourseReiewed") !== -1
        ) {
          state.list = [
            {
              name: "审核管理",
            },
            {
              name: "已审核课程",
            },
          ];
        }
        if (
          n.indexOf("/coursereviewedn") !== -1 ||
          n.indexOf("/CourseReiewedN") !== -1
        ) {
          state.list = [
            {
              name: "审核管理",
            },
            {
              name: "待审核课程",
            },
          ];
        }
        if (
          n.indexOf("/projectreviewed") !== -1 ||
          n.indexOf("/ProjectReviewed") !== -1
        ) {
          state.list = [
            {
              name: "审核管理",
            },
            {
              name: "已审核项目",
            },
          ];
        }
        if (
          n.indexOf("/projectreviewedn") !== -1 ||
          n.indexOf("/ProjectReviewedN") !== -1
        ) {
          state.list = [
            {
              name: "审核管理",
            },
            {
              name: "待审核项目",
            },
          ];
        }
      }
    );

    return {
      ...toRefs(state),
    };
  },
};
</script>
<style lang="scss">
.breadcrumb {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  .el-breadcrumb__inner.is-link {
    font-size: 14px;
    font-weight: 400;
    color: #878b92 !important;
    line-height: 36px;
  }
  .el-breadcrumb__inner {
    font-size: 14px;
    font-weight: 400;
    color: #363636 !important;
    line-height: 36px;
  }
}
</style>