simulation-front/src/views/page/breadCrumb.vue

<template>
    <div class="breadCrumbPanel">
        <div class="contentClass">
            <el-breadcrumb separator="/">
                <transition-group name="breadcrumb">
                    <el-breadcrumb-item v-for="(item, index) in list" :key="item.path + item.name">
                        <router-link v-if="!disabledRoutes.includes(item.name)" @click="console.log(item)" :to="
                            item.name !== $route.name
                                ? item.fullPath
                                    ? item.fullPath
                                    : item.path
                                        ? item.path
                                        : '/'
                                : $route.fullPath
                        ">
                            <i class="el-icon-folder-opened" v-if="index > 0 && index === list.length - 1"></i>
                            {{ item.meta.tabname }}
                        </router-link>
                        <span v-else style="line-height: 20px">{{
                            item.meta.tabname
                        }}</span>
                    </el-breadcrumb-item>
                </transition-group>
            </el-breadcrumb>
        </div>

        <div class="nameBox">
            <div>{{ $store.state.username }}</div>
            <div class="el-icon-switch-button exit" @click="exit"></div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: "breadCrumb",
    data() {
        return {
            // 相关页面只为占位，页面是空白，无法展示
            disabledRoutes: [
                "modelLibrary",
                "algorithmsLibrary",
                "sceneLibrary",
                "systemManagement",
                "workManagement",
            ],
        };
    },
    methods: {
        exit() {
            this.$confirm("是否确定退出系统？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    localStorage.clear();
                    // let loginUrl = window.location.origin + "/login";
                    // window.location.href = loginUrl;
                    this.$router.push({
                        path: "/login",
                    });
                })
                .catch(() => { });
        },
    },
    computed: {
        ...mapState([
            "projectInfoTabname", "taskInfoTabname", "vehicleConfigurationDetailTabName",
            "exportAlgorithmsTabName", "gitAlgorithmsTabName", "gradingRuleDetailTabName",
            "scenePacketListTabName", "parameterDetailTabName", "clusteringDetailTabName",
            "scenePacketDetailTabName", "scenePacketDistributionDetailTabName", "editAccountTabName",
            "vehicleModelDetailTabName",
        ]),
        list() {
            // console.log(this.$route);
            let isMainPage = false;
            this.$route.matched.filter((item) => {
                // 项目详情和任务详情的tabname需要动态获取
                if (item.name === "projectInfo") {
                    item.meta.tabname =
                        this.projectInfoTabname ||
                        localStorage.getItem("projectInfoTabname") ||
                        "项目详情";
                }

                if (item.name === "taskInfo") {
                    item.meta.tabname =
                        this.taskInfoTabname ||
                        localStorage.getItem("taskInfoTabname") ||
                        "任务详情";
                }

                if (item.name === "vehicleConfigurationDetail") {
                    item.meta.tabname =
                        this.vehicleConfigurationDetailTabName ||
                        localStorage.getItem("vehicleConfigurationDetailTabName") ||
                        "车辆配置详情";
                } else if (item.name === "exportAlgorithms") {
                    item.meta.tabname =
                        this.exportAlgorithmsTabName ||
                        localStorage.getItem("exportAlgorithmsTabName") ||
                        "导入算法";
                } else if (item.name === "gitAlgorithms") {
                    item.meta.tabname =
                        this.gitAlgorithmsTabName ||
                        localStorage.getItem("gitAlgorithmsTabName") ||
                        "仓库算法";
                } else if (item.name === "gradingRuleDetail") {
                    item.meta.tabname =
                        this.gradingRuleDetailTabName ||
                        localStorage.getItem("gradingRuleDetailTabName") ||
                        "评分规则详情";
                } else if (item.name === "scenePacketList") {
                    item.meta.tabname =
                        this.scenePacketListTabName ||
                        localStorage.getItem("scenePacketListTabName") ||
                        "场景测试包";
                } else if (item.name === "parameterDetail") {
                    item.meta.tabname =
                        this.parameterDetailTabName ||
                        localStorage.getItem("parameterDetailTabName") ||
                        "编辑参数配置";
                } else if (item.name === "clusteringDetail") {
                    item.meta.tabname =
                        this.clusteringDetailTabName ||
                        localStorage.getItem("clusteringDetailTabName") ||
                        "编辑集群配置";
                } else if (item.name === "scenePacketDetail") {
                    item.meta.tabname =
                        this.scenePacketDetailTabName ||
                        localStorage.getItem("scenePacketDetailTabName") ||
                        "场景包详情";
                } else if (item.name === "scenePacketDistributionDetail") {
                    item.meta.tabname =
                        this.scenePacketDistributionDetailTabName ||
                        localStorage.getItem("scenePacketDistributionDetailTabName") ||
                        "场景包分配详情";
                } else if (item.name === "editAccount") {
                    item.meta.tabname =
                        this.editAccountTabName ||
                        localStorage.getItem("editAccountTabName") ||
                        "编辑账户";
                } else if (item.name === "vehicleModelDetail") {
                    item.meta.tabname =
                        this.vehicleModelDetailTabName ||
                        localStorage.getItem("vehicleModelDetailTabName") ||
                        "车辆设置详情";
                }

                if (item.name === this.$route.name) {
                    item.fullPath = this.$route.fullPath;
                }

                if (item.name === "mainPage") {
                    isMainPage = true;
                }
            });
            if (isMainPage) {
                // 如果跳转首页，会有 / 需要去掉
                return this.$route.matched.slice(0, 1);
            } else {
                // 不要第一个显示首页的
                return this.$route.matched.slice(1);
            }
        },
    },
};
</script>

<style lang="less" scoped>
.breadCrumbPanel {
    position: fixed;
    top: 0;
    left: 150px;
    right: 0;
    bottom: 0;
    z-index: 666;
    height: 50px;
    line-height: 48px;
    border-bottom: 2px solid #f5f7fa;
    background-color: #ffffff;
    overflow: hidden;

    .contentClass {
        // width: 1100px;
        // margin: 0 auto;
        // flex: 1;
        padding-top: 15px;
        padding-left: 12px;

        // .breadcrumb {
        //     height: 30px;
        //     border-radius: 4px;
        //     margin-bottom: 0px;
        //     position: relative;
        // }

        /deep/ .el-breadcrumb {
            
            >span {
                display: block;
                width: 3000px;
            }
        }

        /deep/ .el-breadcrumb__inner a {
            color: #333;
            font-weight: normal;
            user-select: none;
            line-height: 20px;

            &:hover {
                color: @themeColor;
            }
        }

        /deep/ .el-breadcrumb__item:last-child .el-breadcrumb__inner,
        .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
        .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
        .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
            /*font-weight: 700;*/
            color: @themeColor;
            user-select: none;
            line-height: 20px;
            cursor: pointer;
        }

        /deep/ .el-breadcrumb__separator[class*="el-icon-arrow-right"] {
            margin: 0px 3px 0px 1px;
        }
    }

    .nameBox {
        position: absolute;
        top: 4px;
        // right: 20px;
        right: 0;
        z-index: 669;
        display: flex;
        height: 40px;
        padding: 0 20px;
        background-color: #ffffff;

        div {
            height: 40px;
            line-height: 40px;
        }

        .exit {
            margin-left: 10px;
            font-size: 20px;
            cursor: pointer;
        }

        .exit:hover {
            color: @themeColor;
        }
    }

    /* .avatarBox {
        position: absolute;
        top: 4px;
        right: 20px;
        z-index: 669;
        width: 40px;
        height: 40px;
        cursor: pointer;
        border-radius: 50%;
        overflow: hidden;
    } */
}
</style>