zizhujianzhan_web/components/public/breadcrumb.vue

<template>
    <div class="breadcrumb">
        <div class="crumbBox">
            <span class="location">当前位置:</span>
            <!--列表页-->
            <!--一级 这种情况实际没有意义-->
            <div v-if="routeLayer.routeType == 'list' && routeLayer.dirNum == 1" class="crumbItem">
                <NuxtLink to="/">首页</NuxtLink>
                <span>&gt;</span>
                <span>{{name1}}</span>
            </div>
            <!--二级-->
            <div v-if="routeLayer.routeType == 'list' && routeLayer.dirNum == 2" class="crumbItem">
                <NuxtLink to="/">首页</NuxtLink>
                <span>&gt;</span>
                <NuxtLink :to="`/${targetSegment1}/list-1.html`">
                    {{name1}}
                </NuxtLink>
                <span>&gt;</span>
                <span>{{name2}}</span>
            </div>
            <!--三级-->
            <div v-if="routeLayer.routeType == 'list' && routeLayer.dirNum == 3" class="crumbItem">
                <NuxtLink to="/">首页</NuxtLink>
                <span>&gt;</span>
                <!--通常来说能进入第三级的列表，第一级一定是频道页-->
                <NuxtLink :to="`/${targetSegment1}/index.html`">
                    {{name1}}
                </NuxtLink>
                <span>&gt;</span>
                <NuxtLink :to="`/${targetSegment2}/list-1.html`">
                    {{name2}}
                </NuxtLink>
                <span>&gt;</span>
                <span>{{name3}}</span>
            </div>
            <!--详情页 此时页面详情的名字需要靠外部传进来-->
            <!--一级-->
            <div v-if="routeLayer.routeType == 'id' && routeLayer.dirNum == 1" class="crumbItem">
                <NuxtLink to="/">首页</NuxtLink>
                <span>&gt;</span>
                <NuxtLink :to="`/${targetSegment1}/list-1.html`" v-if="targetChildren1 == 0">
                    {{name1}}
                </NuxtLink>
                <NuxtLink :to="`/${targetSegment1}/index.html`" v-else>
                    {{name1}}
                </NuxtLink>
                <span>&gt;</span>
                <span>{{articleName}}</span>
            </div>
            <!--二级-->
            <div v-if="routeLayer.routeType == 'id' && routeLayer.dirNum == 2" class="crumbItem">
                <NuxtLink to="/">首页</NuxtLink>
                <span>&gt;</span>
                <NuxtLink :to="`/${targetSegment1}/list-1.html`" v-if="targetChildren1 == 0">
                    {{name1}}
                </NuxtLink>
                <NuxtLink :to="`/${targetSegment1}/index.html`" v-else>
                    {{name1}}
                </NuxtLink>
                <span>&gt;</span>
                <NuxtLink :to="`/${targetSegment2}/list-1.html`">
                    {{name2}}
                </NuxtLink>
                <span>&gt;</span>
                <span>{{articleName}}</span>
            </div>
            <!--三级-->
            <div v-if="routeLayer.routeType == 'id' && routeLayer.dirNum == 3" class="crumbItem">
                <NuxtLink to="/">首页</NuxtLink>
                <span>&gt;</span>
                <NuxtLink :to="`/${targetSegment1}/list-1.html`" v-if="targetChildren1 == 0">
                    {{name1}}
                </NuxtLink>
                <NuxtLink :to="`/${targetSegment1}/index.html`" v-else>
                    {{name1}}
                </NuxtLink>
                <span>&gt;</span>
                <NuxtLink :to="`/${targetSegment2}/list-1.html`">
                    {{name2}}
                </NuxtLink>
                <span>&gt;</span>
                <NuxtLink :to="`/${targetSegment3}/list-1.html`">
                    {{name3}}
                </NuxtLink>
                <span>&gt;</span>
                <span>{{articleName}}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
//引入element-plus组件
// import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
// //引入mounted
// import { onMounted } from 'vue';

const props = defineProps({
    articleName: {
        type: String,
        default: ''
    }
})

//1.获得路由类型和深度 start ---------------------------------------->
const route = useRoute();

function parseRouteName(routeName) {
  const parts = routeName.split('-');
  const dirNum = parts.filter(part => part === 'dir').length;
  const routeType = parts.includes('list') ? 'list' : 'id';

  return {
    dirNum,
    routeType
  };
}
//获得路由深度和类型 routeLayer.dirNum = 层级 routeLayer.routeType = 类型 list列表页 id详情页
let routeLayer = parseRouteName(route.name)
//1.获得路由类型和深度 end ---------------------------------------->

//2.开始获得面包屑路径 start ---------------------------------------->
//第一级导航
const name1 = ref(''); 
const targetChildren1 = ref(0);//子级数量
const targetSegment1 = getRoutePath(1);
//第二级导航
const name2 = ref('');
const targetChildren2 = ref(0);//子级数量
const targetSegment2 = getRoutePath(2);
//第三级导航 - 理论最大为三级
const name3 = ref(''); 
const targetChildren3 = ref(0);//子级数量
const targetSegment3 = getRoutePath(3);

if(routeLayer.dirNum == 1){
    //通过导航路径反向查询导航id
    const getRouteId1 = await requestDataPromise('/web/getWebsiteRoute', {
        method: 'GET',
        query: {
            'pinyin': targetSegment1,
        },
    });
    if(getRouteId1.code == 200){
        name1.value = getRouteId1.data.alias;
        targetChildren1.value = getRouteId1.data.children_count;
    }
}
if(routeLayer.dirNum == 2){
    //通过导航路径反向查询导航id
    const getRouteId2 = await requestDataPromise('/web/getWebsiteRoute', {
        method: 'GET',
        query: {
            'pinyin': targetSegment2,
        },
    });
    if(getRouteId2.code == 200){
        name2.value = getRouteId2.data.alias;
        targetChildren2.value = getRouteId2.data.children_count;
    }
}
if(routeLayer.dirNum == 3){
    //通过导航路径反向查询导航id
    const getRouteId3 = await requestDataPromise('/web/getWebsiteRoute', {
        method: 'GET',
        query: {
            'pinyin': targetSegment3,
        },
    });
    if(getRouteId3.code == 200){
        name3.value = getRouteId3.data.alias;
        targetChildren3.value = getRouteId3.data.children_count;
    }
}
//2.开始获得面包屑路径 end ---------------------------------------->
</script>

<style lang="less" scoped>
//导航条
.breadcrumb {
    width: 1200px;
    margin: 0 auto;
    height: 22px;
    margin-bottom: 30px;
    margin-top: 40px;
    font-size: 20px;
    color: #666;
    line-height: 23px;
    .crumbBox {
        display: flex;
        align-items: center;
        .crumbItem {
            a,span {
                color: #666;
                margin-right: 10px;
            }
        }
        .location {
            margin-right: 20px;
            height: 22px;
            font-size: 20px;
            color: #666;
            line-height: 23px;
        }
    }
}
</style>