sgxt_web/src/layout/components/SideBar/SideBarMenu.vue

<template>
  <el-menu class="el-menu-vertical-demo" :collapse="!$store.getters.sidebarOpened" :default-active="activeMenu"
    :unique-opened="true" background-color="rgba(0, 0, 0, 0)" :text-color="$store.getters.cssVar.menuText"
    :active-text-color="$store.getters.cssVar.menuActiveText" router>
    <SideBarItem v-for="item in routes" :key="item.path" :route="item"></SideBarItem>
  </el-menu>
</template>

<script setup>
import { computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { filterRoutes, generateMenus } from "@/utils/route";
import SideBarItem from "./SideBarItem.vue";
const store = useStore();
const router = useRouter();
const routes = computed(() => {
  const fRoutes = filterRoutes(router.getRoutes());
  const data = fRoutes.filter(item => {
    if (item.name != "warningLists"
      && item.name != "behaviorWarnings"
      && item.name != "identityWarnings"
      && item.name != "combinedWarnings"
      && item.name != "DeploymentAreas"
      && item.name != "mpvPeos"
      && item.name != "myControls") {
      return item;
    }
  }
  )
  return generateMenus(data);
});
if (!store.getters.token) {
  router.push("/login");
}
if (router.getRoutes().length <= 7 && store.state.permission.routeReady <= 1) {
  store.commit("user/setIsReady", {});
  setTimeout(() => {
    router.go(0);
  }, 200);
}
//默认激活项
const route = useRoute();
const activeMenu = computed(() => {
  const { path } = route;
  return path;
});
</script>

<style lang="scss" scoped>
::v-deep .el-menu-item {
  height: 48px;
}

::v-deep .el-sub-menu__title {
  height: 48px;
  color: rgb(255, 255, 255);
  background-color: rgb(20, 46, 78);
}

::v-deep .el-menu-item.is-active {
  background-image: linear-gradient(to right, #2356d4 0%, #8efbde 100%);
  margin: 0 14px;
  border-radius: 4px;
  // padding-left: 46px !important;
}

::v-deep .el-sub-menu .el-menu-item {
  height: 48px;
  line-height: 48px;
}
</style>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 281px;
  min-height: 400px;
}
</style>