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 === "/learningpath" || n === "/LearningPath") {
          state.list = [
            {
              name: "学习路径",
              href: "",
              // href: "#/coursewaremanage",
            },
          ];
        }
        if (n === "/leveladd" || n === "/LevelAdd") {
          state.list = [
            {
              name: "学习路径",
              href: "/learningpath",
            },
            {
              name: "关卡",
            },
          ];
        }
        if (n === "/leveladddetail" || n === "/LevelAddDetail") {
          state.list = [
            {
              name: "学习路径",
              href: "/learningpath",
            },
            {
              name: "关卡",
              href: "/leveladd",
            },
            {
              name: "创建关卡",
            },
          ];
        }
        if (n === "/projectmanage" || n === "/ProjectManage") {
          state.list = [
            {
              name: "项目中心",
              href: "",
              // href: "#/coursewaremanage",
            },
            {
              name: "项目",
              href: "",
            },
          ];
        }
        if (n === "/projectadd" || n === "/ProjectAdd") {
          state.list = [
            {
              name: "项目",
              href: "/projectmanage",
            },
            {
              name: "创建项目",
            },
          ];
        }

        if (n === "/templatelibrary" || n === "/TemplateLibrary") {
          state.list = [
            {
              name: "项目中心",
            },
            {
              name: "模板库",
            },
          ];
        }
        if (n === "/coursemanage" || n === "/CourseManage") {
          state.list = [
            {
              name: "课程库",
              href: "",
              // href: "#/coursewaremanage",
            },
            {
              name: "课件管理",
              href: "",
            },
          ];
        }
        if (n === "/coursewaremanage" || n === "/CoursewareManage") {
          state.list = [
            {
              name: "课程库",
            },
            {
              name: "课程管理",
            },
          ];
        }
        if (n === "/researchmanage" || n === "/ResearchManage") {
          state.list = [
            {
              name: "调研管理",
              href: "",
              // href: "#/researchmanage",
            },
          ];
        }
        if (n === "/researchmanage" || n === "/ResearchManage") {
          state.list = [
            {
              name: "调研管理",
              href: "",
              // href: "#/researchmanage",
            },
            {
              name: "管理",
              href: "",
            },
          ];
        }

        if (n === "/certificatecenter" || n === "/CertificateCenter") {
          state.list = [
            {
              name: "证书中心",
            },
          ];
        }
        if (n === "/systemmanage" || n === "/SystemManage") {
          state.list = [
            {
              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>