jiangchengfeiyi-Web/src/layout/components/Aside.vue

<template>
  <el-aside :width="sideWidth + 'px'" style="max-height: 200vh; min-height: 100vh; position: sticky; bottom: 0; left: 0; height: auto; background-color: rgb(170, 113, 81); box-shadow: rgba(0, 21, 155, 0.35) 2px 0 6px" >
   <el-aside :style="AsideObj">
    <el-menu
          background-color="rgb(170, 113, 81)"
          :collapse="isCollapse"
          :collapse-transition="false"
          text-color="#fff"
          router
          active-text-color="#ffd04b"
          :default-openeds="['0']"
          unique-opened
        >
        <div style="height: 80px; color: white; font-weight: bold;
           display: flex; align-items: center; justify-content: center">
            <img src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FypVcAOGV-Snipaste_2024-10-11_15-03-12.png" alt="" style="height: 30px">
            <span style="margin-left: 5px" v-show="isShow">泠泷水月阁管理系统</span>
          </div>
          <!-- 遍历 menuRoutes，动态渲染菜单项 -->
          <template v-for="(item, index) in menuRoutes">
            <!-- 如果有子路由，使用 el-sub-menu -->
            <el-sub-menu
              v-if="item.children && item.children.length"
              :key="index"
              :index="index + ''"
            >
              <template #title>
                <el-icon>
                  <component :is="iconComponents[item.meta.icon]"></component>
                </el-icon>
                <span>{{ item.meta.title }}</span>
              </template>
              <!-- 二级菜单 -->
              <template v-for="(item2, index2) in item.children" :key="index2">
                <el-menu-item
                  v-if="!item2.meta?.hidden"
                  :index="item2.path"
                  :class="$route.path === item2.path ? 'is-active' : 'no-active'">
                <template #title>
                  <el-icon>
                    <component
                      :is="iconComponents[item2.meta.icon]"
                    ></component>
                  </el-icon>
                  {{ item2.meta.title }}
                </template>
              </el-menu-item>
              </template>
            </el-sub-menu>
          
            <!-- 如果没有子路由，使用 el-menu-item     代码备用，谨防路由被修改-->   
            <!-- <el-menu-item
              v-else
              :index="item.path"
              :class="$route.path === item.path ? 'is-active' : ''"
            >
              <el-icon>
                <component :is="iconComponents[item.meta.icon]"></component>
              </el-icon>
              <span>{{ item.meta.title }}</span>
            </el-menu-item> -->
          </template>
        </el-menu>
      </el-aside>
    </el-aside>
</template>

<script setup >
import {ref ,computed } from 'vue'
import { defineProps } from 'vue';
import emitter from '@/utils/emitter'
import { useRouter } from 'vue-router';
import {
  House,
  User,
  Location,
  Histogram,
  DataAnalysis,
  Menu,
  Switch,
  Edit,
  Camera,
  Calendar,
  Box,
  Upload,
  Postcard,
  TakeawayBox,
  Files,
  DataBoard,
  MessageBox,
  Discount,
  Notification,
  Tickets,
  Money
} from "@element-plus/icons-vue";  
defineProps(['send-data'])

const showLog = ref(true)
const isCollapse = ref(false)
const isShow = ref(true)
const sideWidth = ref(250)
const AsideObj = ref({
  width: '250px'
})

emitter.on('Aside', (value) => {
  showLog.value = value
  if(showLog.value){
    AsideObj.value.width = '64px'
    isCollapse.value = true
    isShow.value = false
    sideWidth.value = 64
  }else{
    AsideObj.value.width = '250px'
    isCollapse.value = false
    isShow.value = true
    sideWidth.value = 250
  }
})

//动态路由导航
const router = useRouter()
console.log('router--->',router.options.routes);

// 创建图标映射表
const iconComponents = {
  House,
  User,
  Location,
  Histogram,
  DataAnalysis,
  Menu,
  Switch,
  Edit,
  Camera,
  Calendar,
  Box,
  Upload,
  Postcard,
  TakeawayBox,
  Files,
  DataBoard,
  MessageBox,
  Discount,
  Notification,
  Tickets,
  Money
  // 添加其他图标组件映射
};
// 过滤掉不需要展示的路由，并调整 layout 的子路由
const menuRoutes = computed(() => {
  // 获取所有路由
  const routes = router.options.routes;
  // 过滤掉不需要展示的路由并展开 layout 子路由
  const adjustedRoutes = routes.flatMap((route) => {
    // 隐藏 'layout' 路由但展示其子路由作为一级路由
    if (route.path === '/' && route.children) {
      return route.children.map((child) => ({
        ...child,
        path: child.path,
        meta: child.meta,
      }));
    }
    // 如果路由设置为隐藏，则跳过
    if (route.meta?.hidden ) {
      console.log('11',route.children);
      return [];
    }
    return route;
  });
  console.log('adj--->',adjustedRoutes);
  return adjustedRoutes;
});
console.log('menuRoutes--->',menuRoutes.value);

</script>
<style scoped>
.is-active {
  color: #ffd04b;
}
.no-active {
  color: #ffffff;
}
.el-menu--horizontal {
  --el-menu-horizontal-height: 2000px;
}
</style>