ShippingService_WebApp/src/layout/Aside.vue

<template>
  <el-menu
    :default-active="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 setup>
import { ref } from "vue";
import store from "../store";

let defaultActive = ref();
function changeIndex(path) {
  defaultActive.value = path;
}
let menu = [
  {
    icon: "Fold",
    title: "首页",
    items: [
      {
        path: "/index",
        name: "首页",
      },
    ],
  },
  {
    icon: "Avatar",
    title: "船东管理",
    items: [
      {
        path: "/shipOwnerManage/shipOwnerList",
        name: "船东列表",
      },
    ],
  },
  {
    icon: "Ship",
    title: "船舶管理",
    items: [
      {
        path: "/shipManage/shipList",
        name: "船舶列表",
      },
    ],
  },
  {
    icon: "Document",
    title: "工作站",
    items: [
      {
        path: "/workStation/certsManage",
        name: "证书管理",
      },
      {
        path: "/workStation/insuranceManage",
        name: "保险管理",
      },
    ],
  },
];
</script>
<style scoped>
.el-sub-menu__title i {
  height: 20px;
  margin-right: 10px;
}
</style>