sidebar accept Nested Routes

src/router/index.js

@@ -51,10 +51,11 @@ const ExcelDownload = () => import('../views/excel/index');
 const Theme = () => import('../views/theme/index');
 
 /* example*/
-const DynamicTable = () => import('../views/example/dynamictable');
-const Table = () => import('../views/example/table');
-const DragTable = () => import('../views/example/dragTable');
-const InlineEditTable = () => import('../views/example/inlineEditTable');
+const TableLayout = () => import('../views/example/table/index');
+const DynamicTable = () => import('../views/example/table/dynamictable');
+const Table = () => import('../views/example/table/table');
+const DragTable = () => import('../views/example/table/dragTable');
+const InlineEditTable = () => import('../views/example/table/inlineEditTable');
 const Form1 = () => import('../views/example/form1');
 
 /* permission */
@@ -192,10 +193,17 @@ export const asyncRouterMap = [
     name: '综合实例',
     icon: 'zonghe',
     children: [
-      { path: 'dynamictable', component: DynamicTable, name: '动态table' },
-      { path: 'dragtable', component: DragTable, name: '拖拽table' },
-      { path: 'inline_edit_table', component: InlineEditTable, name: 'table内编辑' },
-      { path: 'table', component: Table, name: '综合table' },
+      {
+        path: '/table',
+        component: TableLayout,
+        name: 'table',
+        children: [
+          { path: 'dynamictable', component: DynamicTable, name: '动态table' },
+          { path: 'dragtable', component: DragTable, name: '拖拽table' },
+          { path: 'inline_edit_table', component: InlineEditTable, name: 'table内编辑' },
+          { path: 'table', component: Table, name: '综合table' }
+        ]
+      },
       { path: 'form1', component: Form1, name: '综合form1' }
     ]
   },

src/views/example/table/index.vue

+<template>
+  <router-view></router-view>
+</template>

src/views/layout/Sidebar.vue

 <template>
-    <el-menu :unique-opened='true' mode="vertical" theme="dark" :default-active="$route.path">
-        <template v-for="item in permission_routers" v-if="!item.hidden">
-            <el-submenu :index="item.name" v-if="!item.noDropdown">
-                <template slot="title">
-                    <wscn-icon-svg :icon-class="item.icon||'wenzhang1'" /> {{item.name}}
-                </template>
-                <router-link v-for="child in item.children" :key="child.path" v-if="!child.hidden" class="title-link" :to="item.path+'/'+child.path">
-                    <el-menu-item :index="item.path+'/'+child.path">
-                        {{child.name}}
-                    </el-menu-item>
-                </router-link>
-            </el-submenu>
-            <router-link v-if="item.noDropdown&&item.children.length>0"  :to="item.path+'/'+item.children[0].path">
-                <el-menu-item :index="item.path+'/'+item.children[0].path">
-                    <wscn-icon-svg :icon-class="item.icon||'geren1'" /> {{item.children[0].name}}
-                </el-menu-item>
-            </router-link>
-        </template>
+    <el-menu mode="vertical" theme="dark" :default-active="$route.path">
+        <sidebar-item :routes='permission_routers'></sidebar-item>
     </el-menu>
 </template>
 
 <script>
     import { mapGetters } from 'vuex';
-
+    import  SidebarItem from './SidebarItem';
     export default {
-      name: 'Sidebar',
+      components:{SidebarItem},
       computed: {
         ...mapGetters([
           'permission_routers'
@@ -32,16 +16,8 @@
       }
     }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
     .el-menu {
         min-height: 100%;
     }
-    .wscn-icon {
-        margin-right: 10px;
-    }
-    .hideSidebar .title-link{
-        display: block;
-        text-indent: 10px;
-    }
 </style>

src/views/layout/SidebarItem.vue

+<template>
+    <div>
+        <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">
+                    <wscn-icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.children[0].name}}
+                </el-menu-item>
+            </router-link>
+            <el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
+                <template slot="title">
+                    <wscn-icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.name}}
+                </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">
+                        <el-menu-item :index="item.path+'/'+child.path">
+                            {{child.name}}
+                        </el-menu-item>
+                    </router-link>
+                </template>
+            </el-submenu>
+        </template>
+    </div>
+</template>
+
+<script>
+
+    export default {
+      name: 'SidebarItem',
+      props: {
+        routes: {
+          type: Array
+        }
+      }
+    }
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .wscn-icon {
+        margin-right: 10px;
+    }
+    .hideSidebar .menu-indent{
+        display: block;
+        text-indent: 10px;
+    }
+</style>
+