bjbyrd-website/src/components/home/home-meun1.vue

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <div class="flex-grow"></div>
          <!-- <template v-for="(item, index) in menus">
            <el-menu-item>{{ item.meta.title }}</el-menu-item>
          </template> -->
          <el-menu-item v-bind:key="index" :index="index" v-for="(item, index) in menus">
            {{ item.meta.title }}
            <!-- <template v-if="item.meta.title === '产品介绍'">
              {{ item.meta.title }}
              <el-dropdown>
                <span class="el-dropdown-link">
                  产品介绍
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>Action 1</el-dropdown-item>
                    <el-dropdown-item>Action 2</el-dropdown-item>
                    <el-dropdown-item>Action 3</el-dropdown-item>
                    <el-dropdown-item disabled>Action 4</el-dropdown-item>
                    <el-dropdown-item divided>Action 5</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
            <template v-else>
              {{ item.meta.title }}
            </template> -->
          </el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <el-scrollbar style="margin-top: 20px;">
          <router-view />
        </el-scrollbar>
      </el-main>
    </el-container>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import routers from "../../router";
import { useRouter } from "vue-router";
import { ArrowDown } from '@element-plus/icons-vue'

const menus = routers.options.routes.find((o) => { return o.name === 'home'; }).children;
const router = useRouter();
console.log(router.currentRoute.value.path, 'router');
const index = menus.findIndex((o) => { return o.path === router.currentRoute.value.path });
const activeIndex = ref(index)
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
  activeIndex.value = Number(key);
  console.log(menus[key])
  router.push(menus[key])
}
</script>
<style lang="scss" scoped>
  :deep(.el-menu ){
    background:none;
    border: none !important;

  }
  :deep(.el-menu--horizontal>.el-menu-item.is-active ) {
    color: #fff !important;
      border: none;
  }
  :deep(.el-menu-item:not(.is-disabled):hover){
    background: none !important;
  }
  :deep(.el-menu-item:not(.is-disabled):focus){
    background-color:rgba(220,38,38,0) !important;
  }
  
  :deep(.el-menu-item){
    font-size: 26px;
    font-weight: bold;
  }
  :deep(.el-dropdown-link){
    font-size: 22px;
    color: inherit;
  }
  .flex-grow {
    flex-grow: 0.8;
  }
</style>