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

@@ -1,64 +1,65 @@
 import Vue from 'vue';
 import Router from 'vue-router';
 
-/* layout*/
+/* layout */
 import Layout from '../views/layout/Layout';
 
-// dashboard
+/* login */
-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');
 
-/* Introduction*/
+/* dashboard */
-const Introduction = resolve => require(['../views/introduction/index'], resolve);
+const dashboard = () => import('../views/dashboard/index');
 
-/* components*/
+/* Introduction */
-const componentsIndex = resolve => require(['../views/components/index'], resolve);
+const Introduction = () => import('../views/introduction/index');
-const Tinymce = resolve => require(['../views/components/tinymce'], resolve);
+
-const Markdown = resolve => require(['../views/components/markdown'], resolve);
+/* components */
-const JsonEditor = resolve => require(['../views/components/jsoneditor'], resolve);
+const componentsIndex = () => import('../views/components/index');
-const DndList = resolve => require(['../views/components/dndlist'], resolve);
+const Tinymce = () => import('../views/components/tinymce');
-const AvatarUpload = resolve => require(['../views/components/avatarUpload'], resolve);
+const Markdown = () => import('../views/components/markdown');
-const Dropzone = resolve => require(['../views/components/dropzone'], resolve);
+const JsonEditor = () => import('../views/components/jsoneditor');
-const Sticky = resolve => require(['../views/components/sticky'], resolve);
+const DndList = () => import('../views/components/dndlist');
-const SplitPane = resolve => require(['../views/components/splitpane'], resolve);
+const AvatarUpload = () => import('../views/components/avatarUpload');
-const CountTo = resolve => require(['../views/components/countTo'], resolve);
+const Dropzone = () => import('../views/components/dropzone');
-const Mixin = resolve => require(['../views/components/mixin'], resolve);
+const Sticky = () => import('../views/components/sticky');
+const SplitPane = () => import('../views/components/splitpane');
+const CountTo = () => import('../views/components/countTo');
+const Mixin = () => import('../views/components/mixin');
 
 
-/* charts*/
+/* 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 log*/
+/* error page */
-const ErrorLog = resolve => require(['../views/errlog/index'], resolve);
+const Err404 = () => import('../views/error/404');
+const Err401 = () => import('../views/error/401');
 
-/* excel*/
+/* error log */
-const ExcelDownload = resolve => require(['../views/excel/index'], resolve);
+const ErrorLog = () => import('../views/errlog/index');
 
-/* theme*/
+/* excel */
-const Theme = resolve => require(['../views/theme/index'], resolve);
+const ExcelDownload = () => import('../views/excel/index');
+
+/* theme  */
+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 },
@@ -120,17 +121,17 @@ export const asyncRouterMap = [
     name: '组件',
     icon: 'zujian',
     children: [
-                { path: 'index', component: componentsIndex, name: '介绍 ' },
+      { path: 'index', component: componentsIndex, name: '介绍 ' },
-                { path: 'tinymce', component: Tinymce, name: '富文本编辑器' },
+      { path: 'tinymce', component: Tinymce, name: '富文本编辑器' },
-                { path: 'markdown', component: Markdown, name: 'Markdown' },
+      { path: 'markdown', component: Markdown, name: 'Markdown' },
-                { path: 'jsoneditor', component: JsonEditor, name: 'JSON编辑器' },
+      { path: 'jsoneditor', component: JsonEditor, name: 'JSON编辑器' },
-                { path: 'dndlist', component: DndList, name: '列表拖拽' },
+      { path: 'dndlist', component: DndList, name: '列表拖拽' },
-                { path: 'splitpane', component: SplitPane, name: 'SplitPane' },
+      { path: 'splitpane', component: SplitPane, name: 'SplitPane' },
-                { path: 'avatarupload', component: AvatarUpload, name: '头像上传' },
+      { path: 'avatarupload', component: AvatarUpload, name: '头像上传' },
-                { path: 'dropzone', component: Dropzone, name: 'Dropzone' },
+      { path: 'dropzone', component: Dropzone, name: 'Dropzone' },
-                { path: 'sticky', component: Sticky, name: 'Sticky' },
+      { path: 'sticky', component: Sticky, name: 'Sticky' },
-                { path: 'countto', component: CountTo, name: 'CountTo' },
+      { path: 'countto', component: CountTo, name: 'CountTo' },
-                { path: 'mixin', component: Mixin, name: '小组件' }
+      { path: 'mixin', component: Mixin, name: '小组件' }
     ]
   },
   {
@@ -140,11 +141,11 @@ export const asyncRouterMap = [
     name: '图表',
     icon: 'tubiaoleixingzhengchang',
     children: [
-                { path: 'index', component: chartIndex, name: '介绍' },
+      { path: 'index', component: chartIndex, name: '介绍' },
-                { path: 'keyboard', component: KeyboardChart, name: '键盘图表' },
+      { path: 'keyboard', component: KeyboardChart, name: '键盘图表' },
-                { path: 'keyboard2', component: KeyboardChart2, name: '键盘图表2' },
+      { path: 'keyboard2', component: KeyboardChart2, name: '键盘图表2' },
-                { path: 'line', component: LineMarker, name: '折线图' },
+      { path: 'line', component: LineMarker, name: '折线图' },
-                { path: 'mixchart', component: MixChart, name: '混合图表' }
+      { path: 'mixchart', component: MixChart, name: '混合图表' }
     ]
   },
   {
@@ -154,8 +155,8 @@ export const asyncRouterMap = [
     name: '错误页面',
     icon: '404',
     children: [
-                { path: '401', component: Err401, name: '401' },
+      { path: '401', component: Err401, name: '401' },
-                { path: '404', component: Err404, name: '404' }
+      { path: '404', component: Err404, name: '404' }
     ]
   },
   {
@@ -192,11 +193,19 @@ export const asyncRouterMap = [
     name: '综合实例',
     icon: 'zonghe',
     children: [
-                { path: 'dynamictable', component: DynamicTable, name: '动态table' },
+      {
-                { path: 'dragtable', component: DragTable, name: '拖拽table' },
+        path: '/table',
-                { path: 'inline_edit_table', component: InlineEditTable, name: 'table内编辑' },
+        component: TableLayout,
-                { path: 'table', component: Table, name: '综合table' },
+        redirect: '/table/table',
-                { path: 'form1', component: Form1, name: '综合form1' }
+        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' }
     ]
   },
   { path: '*', redirect: '/404', hidden: true }

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>
+