123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208 |
- <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>></span>
- <span>{{name1}}</span>
- </div>
-
- <div v-if="routeLayer.routeType == 'list' && routeLayer.dirNum == 2" class="crumbItem">
- <NuxtLink to="/">首页</NuxtLink>
- <span>></span>
- <NuxtLink :to="`/${targetSegment1}/list-1.html`">
- {{name1}}
- </NuxtLink>
- <span>></span>
- <span>{{name2}}</span>
- </div>
-
- <div v-if="routeLayer.routeType == 'list' && routeLayer.dirNum == 3" class="crumbItem">
- <NuxtLink to="/">首页</NuxtLink>
- <span>></span>
-
- <NuxtLink :to="`/${targetSegment1}/index.html`">
- {{name1}}
- </NuxtLink>
- <span>></span>
- <NuxtLink :to="`/${targetSegment2}/list-1.html`">
- {{name2}}
- </NuxtLink>
- <span>></span>
- <span>{{name3}}</span>
- </div>
-
-
- <div v-if="routeLayer.routeType == 'id' && routeLayer.dirNum == 1" class="crumbItem">
- <NuxtLink to="/">首页</NuxtLink>
- <span>></span>
- <NuxtLink :to="`/${targetSegment1}/list-1.html`" v-if="targetChildren1 == 0">
- {{name1}}
- </NuxtLink>
- <NuxtLink :to="`/${targetSegment1}/index.html`" v-else>
- {{name1}}
- </NuxtLink>
- <span>></span>
- <span>{{articleName}}</span>
- </div>
-
- <div v-if="routeLayer.routeType == 'id' && routeLayer.dirNum == 2" class="crumbItem">
- <NuxtLink to="/">首页</NuxtLink>
- <span>></span>
- <NuxtLink :to="`/${targetSegment1}/list-1.html`" v-if="targetChildren1 == 0">
- {{name1}}
- </NuxtLink>
- <NuxtLink :to="`/${targetSegment1}/index.html`" v-else>
- {{name1}}
- </NuxtLink>
- <span>></span>
- <NuxtLink :to="`/${targetSegment2}/list-1.html`">
- {{name2}}
- </NuxtLink>
- <span>></span>
- <span>{{articleName}}</span>
- </div>
-
- <div v-if="routeLayer.routeType == 'id' && routeLayer.dirNum == 3" class="crumbItem">
- <NuxtLink to="/">首页</NuxtLink>
- <span>></span>
- <NuxtLink :to="`/${targetSegment1}/list-1.html`" v-if="targetChildren1 == 0">
- {{name1}}
- </NuxtLink>
- <NuxtLink :to="`/${targetSegment1}/index.html`" v-else>
- {{name1}}
- </NuxtLink>
- <span>></span>
- <NuxtLink :to="`/${targetSegment2}/list-1.html`">
- {{name2}}
- </NuxtLink>
- <span>></span>
- <NuxtLink :to="`/${targetSegment3}/list-1.html`">
- {{name3}}
- </NuxtLink>
- <span>></span>
- <span>{{articleName}}</span>
- </div>
- </div>
- </div>
- </template>
- <script setup>
- const props = defineProps({
- articleName: {
- type: String,
- default: ''
- }
- })
- 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
- };
- }
- let routeLayer = parseRouteName(route.name)
- 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){
-
- 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){
-
- 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){
-
- 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;
- }
- }
- </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>
|