nongminwang/components/home/pageNavigation.vue

<template>
    <!-- 导航 -->
    <div class="navigate">
        <div class="partOne">
            <div class="inner">
                <div class="home">
                    <em></em>
                    <NuxtLink :to="'/'">首页</NuxtLink> 
                </div>
                <ul class="partOneTitle">
                    <li class="titleList1">
                        深度服务
                    </li>
                    <li class="titleList111" v-for="(item, index) in navigation1" :key="index">
                        <NuxtLink :href="getLinkPath(item)" :title="item.alias" :target="item.is_url == 1 ? '_blank' : '_self'">
                            {{ item.alias }}
                        </NuxtLink>
                    </li>
                </ul>
            </div>
        </div>
        <div class="partTwo">
            <div class="inner">
                <div class="navleft">
                    <div> 互动版块 </div>
                    <div> 推荐版块 </div>
                </div>
                <ul class="navlist">
                    <li class="navListItem" v-for="(item,index) in navigation2" :key="index">
                        <NuxtLink :href="getLinkPath(item)" :title="item.alias" :target="item.is_url == 1 ? '_blank' : '_self'">
                            {{ item.alias }}
                        </NuxtLink>
                    </li>
                </ul>
                <div class="navright">
                    <div class="nav111" v-for="(item, index) in 2" :key="index">
                        <a href="#">信访投诉</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
//1.获取导航菜单 start ---------------------------------------->
//第一行导航菜单 10个
const navigation1 = ref([]);
//两行的导航菜单 20个 
const navigation2 = ref([]);
//边边上的导航菜单 2个
const navigation3 = ref([]);
//获取导航菜单1 
async function getNavigation1() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 10,
            'placeid': 1
        },
    });
    navigation1.value = mkdata.data;
}
getNavigation1();
//获取导航菜单2
async function getNavigation2() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 20,
            'placeid': 11
        },
    });
    navigation2.value = mkdata.data;
}
getNavigation2();
//获取导航菜单3
async function getNavigation3() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 2,
            'placeid': 31
        },
    });
    navigation3.value = mkdata.data;
}
getNavigation3();
//1.获取导航菜单 end ---------------------------------------->

//格式化跳转路径
const getLinkPath = (item) => {
    if(item.is_url==1){
        return `${item.web_url}`;
    }else if(item.children_count == 0){
        //return `/newsList/${item.category_id}?page=1`;
        return `/${item.aLIas_pinyin}/list-1.html`;
    }else{
        //return `/primaryNavigation/${item.aLIas_pinyin}/`;
        return `/${item.aLIas_pinyin}/index.html`;
    }
}
</script>

<style lang="less" scoped>
    @import url('@/assets/css/public/nav.less');
</style>