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

<template>
    <div class="topClass">
        <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 > 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="avatarBox">
            <!-- <i class="el-icon-switch-button"></i> -->
            <img :src="imgSrc" width="100%" height="100%" />
        </div>
    </div>
</template>

<script>
export default {
    name: "breadCrumb",
    data() {
        return {
            disabledRoutes: [
                "modelLibrary",
                "algorithmsLibrary",
                "sceneLibrary",
                "systemManagement",
                "workManagement",
            ], // 相关页面只为占位，页面是空白，无法展示
            imgSrc: require("@/assets/common/image/photoF.png"),
        };
    },
    methods: {},
    computed: {
        list() {
            // console.log(this.$route.matched);
            let isMainPage = false;
            this.$route.matched.filter((item) => {
                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;
            }
        },
    },
};
</script>

<style lang="less" scoped>
.topClass {
    position: relative;
    height: 50px;
    line-height: 48px;
    border-bottom: 2px solid #f5f7fa;
    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__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;
        }
    }

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