vue3从其他页面跳转页面头部组件菜单el-menu菜单高亮

主要代码

import { ref, onMounted, watch } from 'vue';
const activeIndex = ref("/");
const route = useRoute();onMounted(() => {updateActiveMenu();
});watch(() => route.path, updateActiveMenu);function updateActiveMenu() {// 根据路由更新activeMenu的值，使菜单高亮activeMenu.value = route.fullPath;
}

头部组件 

<template><divclass="header-container flex-center-center header-element-sty":class="isDefault ? 'default-sty' : 'change-sty'"id="subei1"@mouseenter="changeActive()"@mouseleave="removeActive()"><el-menu:default-active="activeIndex"class="el-menu"mode="horizontal":ellipsis="false"active-text-color="#74237e"menu-trigger="click"@select="handleSelect":unique-opened="true"><div class="header-logo" @click="toHome"></div><div class="flex-grow" /><el-sub-menu index="/brandNews" class="header-item"><template #title><span class="el-menu-item-txt">品牌动态</span></template><el-menu-item index="/brandNews?active=company_news">公司新闻</el-menu-item><el-menu-item index="/brandNews?active=media_coverage">媒体报道</el-menu-item><el-menu-item index="/brandNews?active=popular_science_course">科普教程</el-menu-item><el-menu-item index="/brandNews?active=popular_science_activity">科普活动</el-menu-item></el-sub-menu><el-menu-item class="el-menu-item-txt header-item" index="/?name=smartGym"><template #title><span class="el-menu-txt">室外智能健身房</span></template></el-menu-item><el-menu-item class="el-menu-item-txt header-item" index="/sportsCampus"><template #title><span class="el-menu-item-txt">智慧体育公园</span></template></el-menu-item><el-sub-menu class="header-item" index="/fitnessPlans"><template #title><span class="el-menu-item-txt">全民健身方案</span></template><el-menu-item index="/fitnessPlans?plan=smart_sports_campus">智慧体育公园</el-menu-item><el-menu-item index="/fitnessTrain?plan=intelligent_fitness_trail">智能健身步道</el-menu-item><el-menu-item index="/fitnessPath?plan=national_fitness_path">全民健身路径</el-menu-item><el-menu-item index="/fitnessCenter?plan=digital_fitness_center">数字健身中心</el-menu-item></el-sub-menu><el-sub-menu class="header-item" index="/match"><template #title><span class="el-menu-item-txt">智能赛事</span></template><el-menu-item index="/match?active=preview">活动预告</el-menu-item><el-menu-item index="/match?active=sign_up">参赛报名</el-menu-item><el-menu-item index="/match?active=review">赛事回顾</el-menu-item></el-sub-menu><el-menu-item class="el-menu-item-txt header-item"><aclass="menu-item-a"href="https://www.topsupport.cn/"target="_blank">TopSupport</a></el-menu-item><el-menu-item class="el-menu-item-txt header-item"><aclass="menu-item-a"href="https://www.topsupport.cn/"target="_blank">运动健康商城</a></el-menu-item><el-sub-menu class="header-item" index="/about"><template #title><span class="el-menu-item-txt">关于我们</span></template><el-menu-item index="/about?about=us">集团简介</el-menu-item><el-menu-item index="/customer?about=customer">客服中心</el-menu-item></el-sub-menu></el-menu></div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted,watch } from "vue";
const navBackgroundColor = ref("transparent");
const isDefault = ref(false);
const activeIndex = ref("/");
const route= useRoute();
const handleSelect = (key: string, keyPath: string[]) => {activeIndex.value = key;navigateTo(key, { external: true });//页面跳转
};// 根据路由更新activeIndex的值，使菜单高亮
function updateActiveMenu() {activeIndex.value = route.fullPath;
}
// 监听路由
watch(() => route.path, updateActiveMenu);const toHome = () => {activeIndex.value = "/";navigateTo("/");
};
const handleScroll=()=> {// window.innerHeightconst navHeight = 420; // 窗口高度if (window.scrollY >= navHeight) {isDefault.value = true;} else {isDefault.value = false;}
}
const changeActive=()=> {document.getElementById("subei1").classList.add("mouseenterSty");
}
const removeActive=()=>{document.getElementById("subei1").classList.add("mouseleaveSty");
}
onMounted(() => {window.addEventListener("scroll", handleScroll);updateActiveMenu();//使选中页面菜单高亮的方法
});onUnmounted(() => {window.removeEventListener("scroll", handleScroll);
});</script>
<style lang="scss" scoped>
.header-container {width: 100%;position: fixed;// border-bottom: 1px solid rgba(255,255,255,0.5);top: 0;z-index: 99;background: #ffffff;overflow: hidden;.left {img {height: 3rem;}}
}.el-menu {background-color: transparent;display: flex;align-items: center;justify-content: center;border-bottom: none !important;font-size: var(fs-content-normal);&-item {font-size: var(--fs-content-most);display: flex;justify-content: center;}&-item-txt {padding-left: 3rem;}img {width: 6.5rem;}
}
.flex-grow {flex-grow: 1;
}
.el-menu--popup-bottom-start .el-menu-item {display: flex;justify-content: center;
}:deep.el-menu-item {padding: 0;
}:deep.el-menu-item-txt {padding-left: 0;
}
:deep.el-menu:not(.el-menu--collapse) .el-sub-menu__title {padding: 0 1.5rem;
}
.el-menu-item-txt:hover {color: var(--color-priority) !important;background-color: transparent !important;
}
.el-menu--horizontal > .el-menu-item {border-bottom: none;text-decoration: none;
}.el-menu--horizontal > .el-menu-item:hover {color: var(--color-priority) !important;
}
:deep(.el-sub-menu__title) {font-size: var(--fs-content-most);
}// 导航样式
.header-item {padding: 0 1.5rem;
}
// 白底导航
.default-sty {background: #ffffff;.header-logo {width: 10.5rem;height: 2.81rem;background: url(/image/logo.png) no-repeat center center;background-size: 100% 100%;}
}
// 透明导航
.change-sty {background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 13%, rgba(0, 0, 0, 0));.header-logo {width: 10.5rem;height: 2.81rem;background: url(/image/logo_white.png) no-repeat center center;background-size: 100% 100%;}
}
.mouseenterSty {background: #ffffff;.header-logo {width: 10.5rem;height: 2.81rem;background: url(/image/logo.png) no-repeat center center;background-size: 100% 100%;}}</style>

其他页面跳转

<router-link class="menu-item-a" to="/brandNews?active=company_news">品牌动态</router-link>