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>
  <div
    class="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"
        ><a
          class="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"
        ><a
          class="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.innerHeight
  const 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>

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

主要代码

头部组件

悦读