update version && release

README-en.md

@@ -50,7 +50,7 @@ Join the group on QQ 591724180.
 - Multi-environments distribution
 - Dashboard
 - Two-factor authentication
-- Collapsing sidebar
+- Collapsing sidebar (support nested routes)
 - Mock data
 
 ## Development

README.md

@@ -46,7 +46,7 @@
 - 多环境发布
 - dashboard
 - 二次登录
-- 动态侧边栏
+- 动态侧边栏（支持多级路由）
 - mock数据
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "juicy",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A Vue.js admin",
   "author": "Pan <panfree23@gmail.com>",
   "license": "MIT",

src/router/index.js

@@ -4,61 +4,62 @@ import Router from 'vue-router';
 /* layout */
 import Layout from '../views/layout/Layout';
 
-// dashboard
-const dashboard = resolve => require(['../views/dashboard/index'], resolve);
-
-/* error page*/
-const Err404 = resolve => require(['../views/error/404'], resolve);
-const Err401 = resolve => require(['../views/error/401'], resolve);
-
 /* login */
 import Login from '../views/login/';
-import authRedirect from '../views/login/authredirect';
+const authRedirect = () => import('../views/login/authredirect');
-import sendPWD from '../views/login/sendpwd';
+const sendPWD = () => import('../views/login/sendpwd');
-import reset from '../views/login/reset';
+const reset = () => import('../views/login/reset');
+
+/* dashboard */
+const dashboard = () => import('../views/dashboard/index');
 
 /* Introduction */
-const Introduction = resolve => require(['../views/introduction/index'], resolve);
+const Introduction = () => import('../views/introduction/index');
 
 /* components */
-const componentsIndex = resolve => require(['../views/components/index'], resolve);
+const componentsIndex = () => import('../views/components/index');
-const Tinymce = resolve => require(['../views/components/tinymce'], resolve);
+const Tinymce = () => import('../views/components/tinymce');
-const Markdown = resolve => require(['../views/components/markdown'], resolve);
+const Markdown = () => import('../views/components/markdown');
-const JsonEditor = resolve => require(['../views/components/jsoneditor'], resolve);
+const JsonEditor = () => import('../views/components/jsoneditor');
-const DndList = resolve => require(['../views/components/dndlist'], resolve);
+const DndList = () => import('../views/components/dndlist');
-const AvatarUpload = resolve => require(['../views/components/avatarUpload'], resolve);
+const AvatarUpload = () => import('../views/components/avatarUpload');
-const Dropzone = resolve => require(['../views/components/dropzone'], resolve);
+const Dropzone = () => import('../views/components/dropzone');
-const Sticky = resolve => require(['../views/components/sticky'], resolve);
+const Sticky = () => import('../views/components/sticky');
-const SplitPane = resolve => require(['../views/components/splitpane'], resolve);
+const SplitPane = () => import('../views/components/splitpane');
-const CountTo = resolve => require(['../views/components/countTo'], resolve);
+const CountTo = () => import('../views/components/countTo');
-const Mixin = resolve => require(['../views/components/mixin'], resolve);
+const Mixin = () => import('../views/components/mixin');
 
 
 /* charts */
-const chartIndex = resolve => require(['../views/charts/index'], resolve);
+const chartIndex = () => import('../views/charts/index');
-const KeyboardChart = resolve => require(['../views/charts/keyboard'], resolve);
+const KeyboardChart = () => import('../views/charts/keyboard');
-const KeyboardChart2 = resolve => require(['../views/charts/keyboard2'], resolve);
+const KeyboardChart2 = () => import('../views/charts/keyboard2');
-const LineMarker = resolve => require(['../views/charts/line'], resolve);
+const LineMarker = () => import('../views/charts/line');
-const MixChart = resolve => require(['../views/charts/mixchart'], resolve);
+const MixChart = () => import('../views/charts/mixchart');
+
+/* error page */
+const Err404 = () => import('../views/error/404');
+const Err401 = () => import('../views/error/401');
 
 /* error log */
-const ErrorLog = resolve => require(['../views/errlog/index'], resolve);
+const ErrorLog = () => import('../views/errlog/index');
 
 /* excel */
-const ExcelDownload = resolve => require(['../views/excel/index'], resolve);
+const ExcelDownload = () => import('../views/excel/index');
 
 /* theme  */
-const Theme = resolve => require(['../views/theme/index'], resolve);
+const Theme = () => import('../views/theme/index');
 
 /* example*/
-const DynamicTable = resolve => require(['../views/example/dynamictable'], resolve);
+const TableLayout = () => import('../views/example/table/index');
-const Table = resolve => require(['../views/example/table'], resolve);
+const DynamicTable = () => import('../views/example/table/dynamictable');
-const DragTable = resolve => require(['../views/example/dragTable'], resolve);
+const Table = () => import('../views/example/table/table');
-const InlineEditTable = resolve => require(['../views/example/inlineEditTable'], resolve);
+const DragTable = () => import('../views/example/table/dragTable');
-const Form1 = resolve => require(['../views/example/form1'], resolve);
+const InlineEditTable = () => import('../views/example/table/inlineEditTable');
+const Form1 = () => import('../views/example/form1');
 
 /* permission */
-const Permission = resolve => require(['../views/permission/index'], resolve);
+const Permission = () => import('../views/permission/index');
 
 
 Vue.use(Router);
@@ -69,7 +70,7 @@ Vue.use(Router);
   * redirect : if redirect:noredirect will not redirct in the levelbar
   * noDropdown : if noDropdown:true will not has submenu
   * meta : { role: ['admin'] }  will control the page role
-  */
+  **/
 
 export const constantRouterMap = [
     { path: '/login', component: Login, hidden: true },
@@ -191,11 +192,19 @@ export const asyncRouterMap = [
     redirect: 'noredirect',
     name: '综合实例',
     icon: 'zonghe',
+    children: [
+      {
+        path: '/table',
+        component: TableLayout,
+        redirect: '/table/table',
+        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: 'table', component: Table, name: '综合table' }
+        ]
+      },
       { path: 'form1', component: Form1, name: '综合form1' }
     ]
   },

src/views/example/table/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view></router-view>
+</template>

src/views/layout/Sidebar.vue

@@ -1,30 +1,14 @@
 <template>
-    <el-menu :unique-opened='true' mode="vertical" theme="dark" :default-active="$route.path">
+    <el-menu mode="vertical" theme="dark" :default-active="$route.path">
-        <template v-for="item in permission_routers" v-if="!item.hidden">
+        <sidebar-item :routes='permission_routers'></sidebar-item>
-            <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>
 </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

@@ -0,0 +1,46 @@
+<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>
+