perf[Sidebar]: optimize logic

src/views/layout/components/Sidebar/Item.vue

@@ -3,17 +3,18 @@ export default {
   name: 'MenuItem',
   functional: true,
   props: {
-    icon: {
-      type: String,
-      default: ''
-    },
-    title: {
-      type: String,
-      default: ''
+    meta: {
+      type: Object,
+      default: () => {
+        return {
+          title: '',
+          icon: ''
+        }
+      }
     }
   },
   render(h, context) {
-    const { icon, title } = context.props
+    const { icon, title } = context.props.meta
     const vnodes = []
 
     if (icon) {

src/views/layout/components/Sidebar/SidebarItem.vue

@@ -1,33 +1,25 @@
 <template>
-  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
+  <div v-if="!item.hidden" class="menu-wrapper">
 
     <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
       <app-link :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
+          <item :meta="Object.assign({},item.meta,onlyOneChild.meta)" />
         </el-menu-item>
       </app-link>
     </template>
 
-    <el-submenu v-else :index="resolvePath(item.path)">
+    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)">
       <template slot="title">
-        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+        <item :meta="item.meta" />
       </template>
-
-      <template v-for="child in item.children" v-if="!child.hidden">
       <sidebar-item
-          v-if="child.children&&child.children.length>0"
+        v-for="child in item.children"
         :is-nest="true"
         :item="child"
         :key="child.path"
         :base-path="resolvePath(child.path)"
         class="nest-menu" />
-        <app-link v-else :to="resolvePath(child.path)" :key="child.name">
-          <el-menu-item :index="resolvePath(child.path)">
-            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
-          </el-menu-item>
-        </app-link>
-      </template>
     </el-submenu>
 
   </div>
@@ -64,7 +56,7 @@ export default {
     return {}
   },
   methods: {
-    hasOneShowingChild(children, parent) {
+    hasOneShowingChild(children = [], parent) {
       const showingChildren = children.filter(item => {
         if (item.hidden) {
           return false
@@ -89,13 +81,10 @@ export default {
       return false
     },
     resolvePath(routePath) {
-      if (this.isExternalLink(routePath)) {
+      if (isExternal(routePath)) {
         return routePath
       }
       return path.resolve(this.basePath, routePath)
-    },
-    isExternalLink(routePath) {
-      return isExternal(routePath)
     }
   }
 }