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>
            <!--只要出现第二级一定是跳转到频道页-->
            <el-breadcrumb-item v-if="parent_name != ''">
                <NuxtLink :to="`/${parent_pinyin}/index.html`">{{parent_name}}</NuxtLink>
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <span class="routeName" v-if="parent_name==''||routeType=='list'||routeType=='list'">
                    {{ name }}
                </span>
                <!-- <NuxtLink :to="`/${parent_pinyin}/${pinyin}/list-1.html`" class="routeName" v-else>
                    {{ name }}
                </NuxtLink> -->
            </el-breadcrumb-item>
            <!--详情页增加文章标题作为结束-->
        </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,
});
//1.获得当前路由的层级
const route = useRoute();
const routeType = ref('');
//判断当前处于哪个层级
//第二层的列表
if(route.name=='dir-dir-list-id'){
    routeType.value = 'list'
}
//第一层的列表
if(route.name=='dir-list-id'){
    routeType.value = 'list'
}
//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;
    console.log(pageName)
}
</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>