router.js+menu

src/router/index.js

@@ -28,7 +28,7 @@ const createRouter = () =>
             iconName: "gps",
             component: () =>
               import(
-                /*webpackChunkName:'home-cockpitManage'*/ "../views/admin/cockpitManage/electronicMap.vue"
+                /*webpackChunkName:'home-cockpitManage'*/ "../views/admin/cockpitManage/Index.vue"
               ),
           },
           {

src/views/home/components/Menu.vue

@@ -2,103 +2,53 @@
   <el-aside :width="!isCollapse ? '250px' : '100px'" class="asideBox">
     <div class="homeBox">
       <div class="logoItem" :class="{ 'flexCenter ': isCollapse }">
-        <div
-          class="logoImg"
-          v-show="isCollapse"
-          @click="
-            handleChangeMenuUrl(
-              { name: '驾驶舱', id: 1, path: 'cockpitManage', iconName: 'gps' },
-              `/home/cockpitManage?name=驾驶舱`
-            )
-          "
-        >
-          <SvgIcons
-            name="dnao"
-            class="dnao"
-            width="40px"
-            height="40px"
-            color="#222"
-          ></SvgIcons>
+        <div class="logoImg" v-show="isCollapse" @click="
+          handleChangeMenuUrl(
+            { name: '驾驶舱', id: 1, path: 'cockpitManage', iconName: 'gps' },
+            `/home/cockpitManage?name=驾驶舱`
+          )
+          ">
+          <SvgIcons name="dnao" class="dnao" width="40px" height="40px" color="#222"></SvgIcons>
         </div>
-        <span
-          v-if="!isCollapse"
-          @click="
-            handleChangeMenuUrl(
-              { name: '驾驶舱', id: 1, path: 'cockpitManage', iconName: 'gps' },
-              `/home/cockpitManage?name=驾驶舱`
-            )
-          "
-          :class="isCollapse ? 'stop-animation' : 'active-animation'"
-        >
+        <span v-if="!isCollapse" @click="
+          handleChangeMenuUrl(
+            { name: '驾驶舱', id: 1, path: 'cockpitManage', iconName: 'gps' },
+            `/home/cockpitManage?name=驾驶舱`
+          )
+          " :class="isCollapse ? 'stop-animation' : 'active-animation'">
           风机运行管理平台
         </span>
       </div>
     </div>
-    <el-menu
-      collapse-transition
-      ref="menu"
-      class="mt-3 el-menu-vertical-demo"
-      @open="handleOpen"
-      @close="handleClose"
-      background-color="#eff1f3"
-      text-color="#000"
-      active-text-color="#0754a1"
-      :router="true"
-      :default-active="defaultActive"
-      :unique-opened="true"
-      :collapse="isCollapse"
-    >
-      <template v-for="item in routerList">
-        <el-submenu
-          v-if="item.children && item.children.length"
-          :index="item.path"
-        >
+    <el-menu collapse-transition ref="menu" class="mt-3 el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
+      background-color="#eff1f3" text-color="#000" active-text-color="#0754a1" :router="true"
+      :default-active="defaultActive" :unique-opened="true" :collapse="isCollapse">
+      <div v-for="item in routerList" :key="item.id">
+        <el-submenu :index="item.path" v-if="item.children && item.children.length > 0">
           <template slot="title">
-            <i v-if="isElPrefix(item.iconName)" class="el-icon-menu"></i>
-            <i v-else class="svnIcon">
-              <svg-icon :icon-class="item.iconName" />
-            </i>
+            <i class="el-icon-menu" v-if="isElPrefix(item.iconName)"></i>
+            <i v-else class="svnIcon"><svg-icon :icon-class="item.iconName" /></i>
             <span>{{ item.name }}</span>
           </template>
-          <el-menu-item
-            v-for="child in item.children"
-            v-if="child.meta?.hidden === false"
-            :key="child.id"
-            :index="`/home/${item.path}/${child.path}?id=${child.id}&name=${child.name}`"
-          >
-            <i v-if="isElPrefix(child.iconName)" class="el-icon-menu"></i>
-            <i v-else class="svnIcon">
-              <svg-icon :icon-class="child.iconName" />
-            </i>
+          <el-menu-item v-for="child in item.children" :key="child.id"
+            :index="`/home/${item.path}/${child.path}?id=${child.id}&name=${child.name}`">
+            <i class="el-icon-menu" v-if="isElPrefix(child.iconName)"></i>
+            <i v-else class="svnIcon"><svg-icon :icon-class="child.iconName" /></i>
             <span>{{ child.name }}</span>
           </el-menu-item>
         </el-submenu>
-        <el-menu-item
-          v-else-if="item.meta?.hidden === false"
-          :key="item.id"
-          :index="`/home/${item.path}?id=${item.id}&name=${item.name}`"
-        >
-          <i v-if="isElPrefix(item.iconName)" class="el-icon-menu"></i>
-          <i v-else class="svnIcon">
-            <svg-icon :icon-class="item.iconName" />
-          </i>
+        <el-menu-item :key="item.id" :index="`/home/${item.path}?id=${item.id}&name=${item.name}`" v-else>
+          <i class="el-icon-menu" v-if="isElPrefix(item.iconName)"></i>
+          <i v-else class="svnIcon"><svg-icon :icon-class="item.iconName" /></i>
           <span>{{ item.name }}</span>
         </el-menu-item>
-      </template>
+      </div>
     </el-menu>
     <div class="foldBox flexCenter">
-      <span
-        v-show="isCollapse"
-        class="el-icon-s-unfold icon"
-        @click="debouncedToggleCollapse(false)"
-      >
+      <span v-show="isCollapse" class="el-icon-s-unfold icon" @click="debouncedToggleCollapse(false)">
         展开
       </span>
-      <span
-        v-show="!isCollapse"
-        class="el-icon-s-fold icon"
-        @click="debouncedToggleCollapse(true)"
-      >
+      <span v-show="!isCollapse" class="el-icon-s-fold icon" @click="debouncedToggleCollapse(true)">
         收起
       </span>
     </div>
@@ -124,18 +74,12 @@ export default {
           path: "cockpitManage",
           name: "驾驶舱",
           iconName: "gps",
-          meta: {
-            hidden: false,
-          },
           children: [
             {
               id: 11,
               iconName: "gps",
               path: "electronic-map",
               name: "电子地图",
-              meta: {
-                hidden: false,
-              },
             },
           ],
         },
@@ -147,6 +91,7 @@ export default {
       ...this.routerList,
       ...this.$store.state.auth.dynamicRouter,
     ];
+    console.log(this.routerList, "组件内dynamicRouter");
 
     // Debounce the toggle collapse function to prevent rapid toggling
     this.debouncedToggleCollapse = debounce(this.toggleCollapse, 300);
@@ -334,7 +279,8 @@ export default {
           color: #19436d;
         }
 
-        transition: width 0.5s ease, transform 0.5s ease;
+        transition: width 0.5s ease,
+        transform 0.5s ease;
         transform-origin: left;
       }