通过组件嵌套生成左侧列表略缩图时会产生内存溢出bug 等待修复

QMPlusVuePage/src/view/layout/aside/asideComponent/index.vue

@@ -17,7 +17,7 @@ export default {
           if(this.routerInfo.children.length){
               return 'SubMenu'
           }else{
-              return 'menuItem'
+              return 'MenuItem'
           }
       }
   },

QMPlusVuePage/src/view/layout/aside/asideComponent/menuItem.vue

@@ -1,5 +1,8 @@
 <template>
-    <el-menu-item :index="routerInfo.name">{{routerInfo.meta.title}}</el-menu-item>
+  <el-menu-item :index="routerInfo.name">
+    <i class="el-icon-document"></i>
+    <span slot="title">{{routerInfo.meta.title}}</span>
+  </el-menu-item>
 </template>
 
 <script>
@@ -12,7 +15,7 @@ export default {
       },
       type: Object
     }
-  },
+  }
 }
 </script>
 <style lang="scss">

QMPlusVuePage/src/view/layout/aside/index.vue

@@ -1,17 +1,17 @@
 <template>
   <el-menu
-  mode="vertical"
+    :class="['el-menu-vertical',!isCollapse&&'noCollapse']"
     :collapse="isCollapse"
     :default-active="active"
     @select="selectMenuItem"
-    :class="['el-menu-vertical',!isCollapse&&'noCollapse']"
+    unique-opened
   >
-  <AsideComponent :routerInfo="asyncRouters[0]"/>
+    <AsideComponent :key="item.name" :routerInfo="item" v-for="item in asyncRouters[0].children" />
   </el-menu>
 </template>
 
 <script>
-import {mapGetters} from 'vuex'
+import { mapGetters } from 'vuex'
 import AsideComponent from '@/view/layout/aside/asideComponent'
 export default {
   name: 'Aside',
@@ -23,11 +23,12 @@ export default {
   },
   methods: {
     selectMenuItem(index) {
-      this.$router.push({name:index})
+      if (index === this.$route.name) return
+      this.$router.push({ name: index })
     }
   },
-  computed:{
-    ...mapGetters('router',['asyncRouters'])
+  computed: {
+    ...mapGetters('router', ['asyncRouters'])
   },
   components: {
     AsideComponent

QMPlusVuePage/src/view/layout/index.vue

@@ -35,6 +35,10 @@ $mainHight: calc(100vh - 52px);
   .main-cont {
     .el-menu-vertical {
       min-height: $mainHight !important;
+    &.noCollapse{
+      min-height: $mainHight !important;
+      width: 250px;
+    }
     }
     &::-webkit-scrollbar {
       display: none;