DataCenter/src/components/Aside.vue

<template>
  <el-menu
    :default-active="this.$store.state.currentMenuItem"
    style="width: 220px; height: 100%"
    background-color="#141B29"
    text-color="#fff"
    active-text-color="#ffd04b"
    :router="true"
  >
    <el-sub-menu v-for="(item, index) in menu" :key="item" :index="index + ''">
      <template v-slot:title>
        <el-icon :size="18">
          <component :is="item.icon" />
        </el-icon>
        <span>{{ item.title }}</span>
      </template>
      <el-menu-item
        v-for="son in item.items"
        :index="son.path"
        :key="son"
        @click="changeIndex(son.path)"
      >
        {{ son.name }}
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    let defaultActive = ref();
    function changeIndex(path) {
      defaultActive.value = path;
    }
    let menu = [
      {
        icon: "Fold",
        title: "航次管理",
        items: [
          {
            path: "/voyage/voyageList",
            name: "航次列表",
          },
        ],
      },
      {
        icon: "userFilled",
        title: "货主信息",
        items: [
          {
            path: "/cargoOwnerManage/cargoOwnerCompanyList",
            name: "货主公司列表",
          },
        ],
      },
      {
        icon: "User",
        title: "代理信息",
        items: [
          {
            path: "/agencyManage/agencyCompanyList",
            name: "代理公司列表",
          },
        ],
      },
      {
        icon: "Avatar",
        title: "船东信息",
        items: [
          {
            path: "/shipOwnerManage/shipOwnerList",
            name: "船东列表",
          },
        ],
      },
      {
        icon: "Ship",
        title: "船舶信息",
        items: [
          {
            path: "/shipManage/shipList",
            name: "船舶列表",
          },
        ],
      },
      {
        icon: "Place",
        title: "港口信息",
        items: [
          {
            path: "/portsManage/portsList",
            name: "港口列表",
          },
          {
            path: "/portsManage/sailingSchedule",
            name: "航期维护",
          },
        ],
      },
      {
        icon: "Magnet",
        title: "航次区块链",
        items: [
          {
            path: "/toolManage/blockChain",
            name: "航次上链",
          },
        ],
      },
      {
        icon: "Document",
        title: "版本日志",
        items: [
          {
            path: "/toolManage/versions",
            name: "版本日志",
          },
        ],
      },
    ];

    return {
      changeIndex,
      defaultActive,
      menu,
    };
  },
};
</script>
<style scoped>
.el-sub-menu__title i {
  height: 20px;
  margin-right: 10px;
}
</style>