JiangYunPhotosCargoOwner_WebApp/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>
        <i :class="item.icon"></i>
        <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: "el-icon-s-data",
        title: "航次",
        items: [
          {
            path: "/voyage/voyageList",
            name: "航次列表",
          },
        ],
      },
    ];

    return {
      changeIndex,
      defaultActive,
      menu,
    };
  },
};
</script>