zizhujianzhan_web/components/template/component/public/breadcrumb.vue

<template>
    <div class="listRouterBox">
        <span class="location">当前位置:</span>
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item>
                <NuxtLink to="/">首页</NuxtLink>
            </el-breadcrumb-item>
            <!--第一种情况 当前是2级的列表页 start-->
            <el-breadcrumb-item v-if="routeLevel==1">
                <span class="routeName">
                    {{name}}
                </span>
            </el-breadcrumb-item>
            <!--第一种情况 当前是2级的列表页 end-->
            <!--第二种情况 当前是3级的列表页 start-->
            <el-breadcrumb-item v-if="routeLevel==2">
                <NuxtLink :to="`/${parent_pinyin}/list-1.html`" class="routeName">
                    {{parent_name}}
                </NuxtLink> 
            </el-breadcrumb-item>
            <el-breadcrumb-item v-if="routeLevel==2">
                <span class="routeName">
                    {{name}}
                </span>
            </el-breadcrumb-item>
            <!--第二种情况 当前是3级的列表页 end-->
            <!--第三种情况 当前是2级的详情页 start-->
            <el-breadcrumb-item v-if="routeLevel==3">
                <NuxtLink :to="`/${pinyin}/index.html`">{{name}}</NuxtLink>
            </el-breadcrumb-item>
            <el-breadcrumb-item v-if="routeLevel==3">
                <span class="routeName">
                    {{ articleName }}
                </span>
            </el-breadcrumb-item>
            <!--第三种情况 当前是2级的详情页 end-->
            <!--第四种情况 当前是3级的详情页 start-->
            <el-breadcrumb-item v-if="routeLevel==4">
                <NuxtLink :to="`/${parent_pinyin}/list-1.html`" class="routeName">
                    {{parent_name}}
                </NuxtLink> 
            </el-breadcrumb-item>
            <el-breadcrumb-item v-if="routeLevel==4">
                <NuxtLink :to="`/${parent_pinyin}/${pinyin}/list-1.html`">
                    {{parent_name}}
                </NuxtLink> 
            </el-breadcrumb-item>
            <el-breadcrumb-item v-if="routeLevel==4">
                <span class="routeName">
                    {{ articleName }}
                </span>
            </el-breadcrumb-item>
            <!--第四种情况 当前是3级的详情页 end-->
        </el-breadcrumb>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElBreadcrumb, ElBreadcrumbItem, ElPagination } from 'element-plus';
import { ArrowRight } from '@element-plus/icons-vue';
//获得页面的routeId导航池id
const props = defineProps({
    routeId: Number,
    articleName: String,
});
//1.获得当前路由的层级
const route = useRoute();
const routeLevel = ref(0);
//判断当前处于哪个层级
//第二层的列表
if(route.name=='dir-dir-list-id'){
    routeLevel.value = 2
}
//第一层的列表
if(route.name=='dir-list-id'){
    routeLevel.value = 1
}
//第二层详情
if(route.name=='dir-dir-id'){
    routeLevel.value = 4
}
//第一层详情
if(route.name=='dir-id'){
    routeLevel.value = 3
}
//2.获得当前栏目的名称 面包屑的最后一级
const name = ref('')
const pinyin = ref('');
//3.获得父级栏目 面包屑倒数第二级
const parent_name = ref("");
const parent_id = ref("");
const parent_pinyin = ref("");
const parent_children_count = ref(0);

const pageName = await requestDataPromise('/web/getOneWebsiteCategory', {
    method: 'GET',
    query: {
        'catid': props.routeId
    },
}); 
if (pageName.code == 200) {
    //最后一级
    name.value = pageName.data.alias
    pinyin.value = pageName.data.aLIas_pinyin;
    //倒数第二级 如果存在
    parent_name.value = pageName.data.parent_name;
    parent_id.value = pageName.data.parent_id;
    parent_pinyin.value = pageName.data.parent_pinyin;
    parent_children_count.value = pageName.data.children_count;
}
</script>

<style lang="less" scoped>
//导航条
.listRouterBox {
    width: 100%;
    height: 52px;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #999;
    text-align: left;
    font-style: normal;
    text-transform: none;
    .routeName {
        color: #333;
    }
    :deep(.el-breadcrumb) {
        display: inline-block;
        vertical-align: -4px;
    }
    :deep(.el-breadcrumb__inner a),
    :deep(.el-breadcrumb__inner.is-link) {
        color: #999;
        font-weight: 400;
        text-decoration: none;
        transition: var(--el-transition-color);
    }
    span {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 20px;
        color: #999;
        line-height: 23px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
    .location {
        margin-right: 20px;
        width: 100px;
        height: 22px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 20px;
        color: #999;
        line-height: 23px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
}
</style>