usky-web-portal/src/components/layout/header.vue

<script setup lang="ts">
import { ref } from 'vue'
import { useStore  } from 'vuex'
import { useRoute } from "vue-router"
const store = useStore()
const route = useRoute()
const currentPagePath = ref(route.path)//当前页面路径
const pathTemplateQuery = ref()//页面模版复用参数
if(route.query && route.query.dup){
    pathTemplateQuery.value = route.query.dup
}
console.log(11111)
//获取菜单列表及当前页面内容
store.dispatch('getMenuList').then(()=>{
    const data = ref(store.state.menuList)
    const paramsData = ref({}) //页面主题内容请求参数
    console.log(3333)
    let str 
    if(currentPagePath.value.indexOf("_")){
        console.log(currentPagePath.value)
        str = currentPagePath.value.split("_")[0]
    }
    for(let i=0;i<data.value.length;i++){
        if(currentPagePath.value == data.value[i].path || str == data.value[i].path){
            console.log(5,data.value[i].path)
            //模板 主页
            if(!data.value[i].sname && !route.query?.categoryid){
                console.log(1)
                paramsData.value = {
                    params:{
                        categoryid: data.value[i].id,
                        pageNum:1,
                        pageSize:100,
                        order:"sortindex",
                    },
                    index:currentPagePath.value,
                    sub:i
                }
                if(data.value[i].path == "/cases"){
                    paramsData.value.params.categoryid = data.value[i].children[0].id
                }
            }
             //详情页(添加details识别参数)
            //  console.log(route.query?.categoryid  && !route.query.dup)
             if(route.query?.categoryid  && !route.query.dup){
                paramsData.value = {
                    params:{
                        categoryid: route.query?.categoryid,
                        pageNum:1,
                        pageSize:1,
                        order:"sortindex",
                        articleid: route.query?.id,
                        id: route.query?.id,
                        details:true
                    },
                    index:currentPagePath.value,
                    sub:i
                }
             }
            //复用模板页
           
        }
    }
    store.dispatch('getPageData',paramsData.value)
})
</script>
<template>
        <header class="header-absolute sticky-header">
            <div class="custom-container-one">
                <div class="mainmenu-area  d-flex align-items-center justify-content-center">
                    <div class="logo">
                        <a href="/"><img src="@/assets/img/logo-white.png" alt="uskylogo"></a>
                    </div>
                    <div class="d-flex align-items-center ">
                        <nav class="main-menu">
                            <div class="menu-items">
                                <ul v-if="store.state.menuList.length>0">
                                    <li v-for="item in store.state.menuList" :key="item.id" 
                                    :class="item.sname ?  `${currentPagePath}?dup=${item.sname}` ==   `${item.path}?dup=${item.sname}`  &&  pathTemplateQuery ? 'active' : ' '  : currentPagePath == item.path  &&  !pathTemplateQuery ? 'active' : ' ' "
                                    >
                                        <a  :href="item.sname ? `${item.path}?dup=${item.sname}` : item.path
                                            ">{{item.categoryName}}</a>
                                            <ul class="submenu">
                                                <li v-if="item.children" v-for="children in item.children" :key="children.id">
                                                    <a  :href="item.sname ?   `${item.path}?dup=${item.sname}&categoryid=${children.id}&isUrlId=1` : `${item.path}?categoryid=${children.id}&isUrlId=1` "> 
                                                        <span style="font-weight:bold;margin-right:10px">·</span>
                                                        {{children.categoryName}}
                                                    </a>
                                                </li>
                                            </ul>
                                    </li>
                                </ul>
                            </div>
                        </nav>
                        <div class="apply-expre" v-if="store.state.menuList.length>0" @click="gogo()">申请体验</div>
                    </div>
                </div>
                <div>
                    <div class="mobile-menu"></div>
                </div>
            </div>
        </header>
</template>
<style lang="scss" scoped>

</style>