refactor:router&&sidemenu

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

@@ -1,24 +1,32 @@
 <template>
-  <div>
+  <div class='menu-wrapper'>
     <template v-for="item in routes">
-      <router-link v-if="!item.hidden&&item.noDropdown&&item.children.length>0" :to="item.path+'/'+item.children[0].path">
-        <el-menu-item :index="item.path+'/'+item.children[0].path">
-          <svg-icon v-if='item.icon' :icon-class="item.icon" /> {{item.children[0].name}}
+
+      <router-link v-if="!item.hidden&&item.children&&item.children.length===1" :to="item.path+'/'+item.children[0].path" :key='item.children[0].name'>
+        <el-menu-item :index="item.path+'/'+item.children[0].path" class='submenu-title-noDropdown'>
+          <svg-icon v-if='item.children[0].meta&&item.children[0].meta.icon' :icon-class="item.children[0].meta.icon"></svg-icon>
+          <span v-if='item.children[0].meta&&item.children[0].meta.title'>{{item.children[0].meta.title}}</span>
         </el-menu-item>
       </router-link>
-      <el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
+
+      <el-submenu v-if="!item.hidden&&item.children&&item.children.length>1" :index="item.name||item.path" :key='item.name'>
         <template slot="title">
-          <svg-icon v-if='item.icon' :icon-class="item.icon" /> {{item.name}}
+          <svg-icon v-if='item.meta&&item.meta.icon' :icon-class="item.meta.icon"></svg-icon>
+          <span v-if='item.meta&&item.meta.title'>{{item.meta.title}}</span>
         </template>
-        <template v-for="child in item.children" v-if='!child.hidden'>
-          <sidebar-item class='menu-indent' v-if='child.children&&child.children.length>0' :routes='[child]'> </sidebar-item>
-          <router-link v-else class="menu-indent" :to="item.path+'/'+child.path">
+
+        <template v-if='!child.hidden' v-for="child in item.children">
+          <sidebar-item class='nest-menu' v-if='child.children&&child.children.length>0' :routes='[child]' :key='child.path'></sidebar-item>
+
+          <router-link v-else :to="item.path+'/'+child.path" :key='child.name'>
             <el-menu-item :index="item.path+'/'+child.path">
-              {{child.name}}
+              <svg-icon v-if='child.meta&&child.meta.icon' :icon-class="child.meta.icon"></svg-icon>
+              <span v-if='child.meta&&child.meta.title'>{{child.meta.title}}</span>
             </el-menu-item>
           </router-link>
         </template>
       </el-submenu>
+
     </template>
   </div>
 </template>
@@ -33,14 +41,3 @@ export default {
   }
 }
 </script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.svg-icon {
-  margin-right: 10px;
-}
-.hideSidebar .menu-indent{
-  display: block;
-  text-indent: 10px;
-}
-</style>
-

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

@@ -1,23 +1,28 @@
 <template>
-  <el-menu mode="vertical" theme="dark" :default-active="$route.path">
-    <sidebar-item :routes="routes"></sidebar-item>
-  </el-menu>
+  <scroll-bar>
+    <el-menu mode="vertical" unique-opened :default-active="$route.path" :collapse="isCollapse" background-color="#304156" text-color="#fff" active-text-color="#409EFF">
+      <sidebar-item :routes='routes'></sidebar-item>
+    </el-menu>
+  </scroll-bar>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import SidebarItem from './SidebarItem'
+import ScrollBar from '@/components/ScrollBar'
+
 export default {
-  components: { SidebarItem },
+  components: { SidebarItem, ScrollBar },
   computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
     routes() {
       return this.$router.options.routes
+    },
+    isCollapse() {
+      return !this.sidebar.opened
     }
   }
 }
 </script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.el-menu {
-  min-height: 100%;
-}
-</style>