first

src/layout/components/menu/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <el-menu
+          class="menus"
+          :collapse="isCollapse"
+          :default-active="activeIndex"
+          background-color="#2d3a4b"
+          text-color="#fff"
+          active-text-color="#409eff"
+          router
+  >
+    <menu-item v-for="(route,index) in routes" :key="route.name" :route="route"></menu-item>
+  </el-menu>
+</template>
+
+<script>
+  import { defineComponent, ref, onMounted, watch, computed } from 'vue'
+  import { useRouteStore } from '@/store/router'
+  import MenuItem from '@/layout/components/menu/item.vue'
+  import { useRoute } from 'vue-router'
+  import { useAppStore } from '@/store/app'
+
+  export default defineComponent({
+    name: 'Menu',
+    created () {
+    },
+    components: { MenuItem },
+    setup () {
+      const routes = ref([])
+      const route = useRoute()
+      const app = useAppStore()
+      const isCollapse = computed(() => app.setting.sideIsCollapse)
+      const activeIndex = computed(() => route.name)
+
+      routes.value = useRouteStore().routes
+      return {
+        routes,
+        activeIndex,
+        isCollapse,
+      }
+    },
+
+  })
+</script>
+
+<style lang="scss" scoped>
+  .menus {
+    min-height: 100vh;
+    border-right: none;
+    &:not(.el-menu--collapse) {
+      width: 210px;
+    }
+
+  }
+</style>
+<style>
+</style>

src/layout/components/menu/item.vue

@@ -0,0 +1,52 @@
+<template>
+  <el-sub-menu v-if="route.children&&route.children.filter(c=>!c.meta?.hide).length>1&&route.children.some(r => !r.meta?.hide)"
+               :key="route.name"
+               :index="route.name"
+  >
+    <template #title>
+      <el-icon v-if="route.meta?.icon">
+        <component :is="`el-icon-${route.meta.icon}`"></component>
+      </el-icon>
+      <span>{{route.meta?.title||route.name}}</span>
+    </template>
+    <menu-item v-for="(_route,_index) in route.children"
+               :route="_route"
+               :key="_route.name">
+    </menu-item>
+  </el-sub-menu>
+  <el-menu-item v-else-if="!parseRoute(route).meta?.hide" :route="parseRoute(route)" :index="parseRoute(route).name">
+    <el-icon v-if="parseRoute(route).meta?.icon">
+      <component :is="`el-icon-${parseRoute(route).meta.icon}`"></component>
+    </el-icon>
+    <span>{{parseRoute(route).meta?.title||parseRoute(route).name}}</span>
+  </el-menu-item>
+</template>
+
+<script>
+  import { defineComponent } from 'vue'
+
+  export default defineComponent({
+    name: 'MenuItem',
+    props: {
+      route: {},
+    },
+    mounted () {
+    },
+    setup (props) {
+      //判断仅有一个子项的route
+      const parseRoute = (route) => {
+        if (route.children && route.children.filter(c => !c.meta?.hide).length === 1) {
+          return route.children.filter(c => !c.meta?.hide)[0]
+        } else {
+          return route
+        }
+      }
+      return {
+        parseRoute,
+      }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+</style>