左侧导航优化

src/layout/components/sidebar/sidebar.vue

@@ -1,43 +1,20 @@
 <template>
   <div class="sidebar_menu">
     <div class="sidebar_menu_scroll">
-      <el-menu default-active="1" @open="handleOpen" @close="handleClose">
-        <template v-for="(item, index) in menu">
-          <el-sub-menu v-if="item.children.length > 0" :key="item.path" :index="`${index}`">
-            <template #title>
-              <span>{{ item.name }}</span>
-            </template>
-            <el-menu-item
-              v-for="(ite, indey) in item.children"
-              :key="ite.path"
-              :index="`${index}-${indey}`"
-              @click="menuClick(ite.path)"
-            >
-              {{ ite.name }}
-            </el-menu-item>
-          </el-sub-menu>
-          <el-menu-item v-else :key="item.name" :index="`${index}`" @click="menuClick(item.path)">{{
-            item.name
-          }}</el-menu-item>
+      <el-menu default-active="1">
+        <template v-for="(item, index) in menu" :key="item.path">
+          <sidebarItem :item="item" :index="`${index}`" />
         </template>
       </el-menu>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { useRouter } from "vue-router";
 import { useGetters } from "@/hooks/storeHooks";
 
-const router = useRouter();
-const { menu } = useGetters(["menu"]);
+import sidebarItem from "./sidebarItem.vue";
 
-const handleOpen = (key: string, keyPath: string[]) => {
-  // console.log(key, keyPath);
-};
-const handleClose = () => ({});
-const menuClick = (item: any) => {
-  router.push(item);
-};
+const { menu } = useGetters(["menu"]);
 </script>
 <style lang="scss" scoped>
 .sidebar_menu {

src/layout/components/sidebar/sidebarItem.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-sub-menu v-if="props.item.children.length > 0" :index="props.index">
+    <template #title>
+      <span>{{ props.item.name }}</span>
+    </template>
+    <template v-for="(ite, indey) in props.item.children" :key="ite.path">
+      <sidebarItem :item="ite" :index="`${index}-${indey}`" />
+    </template>
+  </el-sub-menu>
+  <el-menu-item v-else :index="props.index" @click="menuClick(props.item.path)">{{ props.item.name }}</el-menu-item>
+</template>
+
+<script lang="ts">
+export default {
+  name: "sidebarItem"
+};
+</script>
+
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const props = defineProps({
+  item: {
+    type: Object,
+    default: () => ({})
+  },
+  index: {
+    type: String,
+    default: undefined
+  }
+});
+
+const menuClick = (item: any) => {
+  router.push(item);
+};
+</script>
+
+<style lang="scss" scoped></style>