From 327ed42e247bc3577948d8bfe8c6239bd803bab9 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Wed, 31 May 2017 15:52:27 +0800
Subject: [PATCH] sidebar accept Nested Routes
---
src/router/index.js | 24 ++++++----
src/views/example/{ => table}/dragTable.vue | 0
.../example/{ => table}/dynamictable.vue | 0
src/views/example/table/index.vue | 3 ++
.../example/{ => table}/inlineEditTable.vue | 0
src/views/example/{ => table}/table.vue | 0
src/views/layout/Sidebar.vue | 32 ++-----------
src/views/layout/SidebarItem.vue | 46 +++++++++++++++++++
8 files changed, 69 insertions(+), 36 deletions(-)
rename src/views/example/{ => table}/dragTable.vue (100%)
rename src/views/example/{ => table}/dynamictable.vue (100%)
create mode 100644 src/views/example/table/index.vue
rename src/views/example/{ => table}/inlineEditTable.vue (100%)
rename src/views/example/{ => table}/table.vue (100%)
create mode 100644 src/views/layout/SidebarItem.vue
diff --git a/src/router/index.js b/src/router/index.js
index e5b3de83..d7674a2c 100644
--- a/src/router/index.js
+++ b/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' }
]
},
diff --git a/src/views/example/dragTable.vue b/src/views/example/table/dragTable.vue
similarity index 100%
rename from src/views/example/dragTable.vue
rename to src/views/example/table/dragTable.vue
diff --git a/src/views/example/dynamictable.vue b/src/views/example/table/dynamictable.vue
similarity index 100%
rename from src/views/example/dynamictable.vue
rename to src/views/example/table/dynamictable.vue
diff --git a/src/views/example/table/index.vue b/src/views/example/table/index.vue
new file mode 100644
index 00000000..a44ab87b
--- /dev/null
+++ b/src/views/example/table/index.vue
@@ -0,0 +1,3 @@
+<template>
+ <router-view></router-view>
+</template>
diff --git a/src/views/example/inlineEditTable.vue b/src/views/example/table/inlineEditTable.vue
similarity index 100%
rename from src/views/example/inlineEditTable.vue
rename to src/views/example/table/inlineEditTable.vue
diff --git a/src/views/example/table.vue b/src/views/example/table/table.vue
similarity index 100%
rename from src/views/example/table.vue
rename to src/views/example/table/table.vue
diff --git a/src/views/layout/Sidebar.vue b/src/views/layout/Sidebar.vue
index c4cab5c0..d06f72f9 100644
--- a/src/views/layout/Sidebar.vue
+++ b/src/views/layout/Sidebar.vue
@@ -1,30 +1,14 @@
<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>
diff --git a/src/views/layout/SidebarItem.vue b/src/views/layout/SidebarItem.vue
new file mode 100644
index 00000000..2d9b85cf
--- /dev/null
+++ b/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>
+