Skip to content

Commit 327ed42

Browse files
PanJiaChenPanJiaChen
committed
sidebar accept Nested Routes
1 parent 677ef6d commit 327ed42

File tree

8 files changed

+69
-36
lines changed

8 files changed

+69
-36
lines changed

‎src/router/index.js

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,11 @@ const ExcelDownload = () => import('../views/excel/index');
5151
const Theme = () => import('../views/theme/index');
5252

5353
/* example*/
54-
const DynamicTable = () => import('../views/example/dynamictable');
55-
const Table = () => import('../views/example/table');
56-
const DragTable = () => import('../views/example/dragTable');
57-
const InlineEditTable = () => import('../views/example/inlineEditTable');
54+
const TableLayout = () => import('../views/example/table/index');
55+
const DynamicTable = () => import('../views/example/table/dynamictable');
56+
const Table = () => import('../views/example/table/table');
57+
const DragTable = () => import('../views/example/table/dragTable');
58+
const InlineEditTable = () => import('../views/example/table/inlineEditTable');
5859
const Form1 = () => import('../views/example/form1');
5960

6061
/* permission */
@@ -192,10 +193,17 @@ export const asyncRouterMap = [
192193
name: '综合实例',
193194
icon: 'zonghe',
194195
children: [
195-
{ path: 'dynamictable', component: DynamicTable, name: '动态table' },
196-
{ path: 'dragtable', component: DragTable, name: '拖拽table' },
197-
{ path: 'inline_edit_table', component: InlineEditTable, name: 'table内编辑' },
198-
{ path: 'table', component: Table, name: '综合table' },
196+
{
197+
path: '/table',
198+
component: TableLayout,
199+
name: 'table',
200+
children: [
201+
{ path: 'dynamictable', component: DynamicTable, name: '动态table' },
202+
{ path: 'dragtable', component: DragTable, name: '拖拽table' },
203+
{ path: 'inline_edit_table', component: InlineEditTable, name: 'table内编辑' },
204+
{ path: 'table', component: Table, name: '综合table' }
205+
]
206+
},
199207
{ path: 'form1', component: Form1, name: '综合form1' }
200208
]
201209
},

‎src/views/example/dragTable.vue renamed to ‎src/views/example/table/dragTable.vue

File renamed without changes.

‎src/views/example/dynamictable.vue renamed to ‎src/views/example/table/dynamictable.vue

File renamed without changes.

‎src/views/example/table/index.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<router-view></router-view>
3+
</template>

‎src/views/example/inlineEditTable.vue renamed to ‎src/views/example/table/inlineEditTable.vue

File renamed without changes.

‎src/views/example/table.vue renamed to ‎src/views/example/table/table.vue

File renamed without changes.

‎src/views/layout/Sidebar.vue

Lines changed: 4 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,23 @@
11
<template>
2-
<el-menu :unique-opened='true' mode="vertical" theme="dark" :default-active="$route.path">
3-
<template v-for="item in permission_routers" v-if="!item.hidden">
4-
<el-submenu :index="item.name" v-if="!item.noDropdown">
5-
<template slot="title">
6-
<wscn-icon-svg :icon-class="item.icon||'wenzhang1'" /> {{item.name}}
7-
</template>
8-
<router-link v-for="child in item.children" :key="child.path" v-if="!child.hidden" class="title-link" :to="item.path+'/'+child.path">
9-
<el-menu-item :index="item.path+'/'+child.path">
10-
{{child.name}}
11-
</el-menu-item>
12-
</router-link>
13-
</el-submenu>
14-
<router-link v-if="item.noDropdown&&item.children.length>0" :to="item.path+'/'+item.children[0].path">
15-
<el-menu-item :index="item.path+'/'+item.children[0].path">
16-
<wscn-icon-svg :icon-class="item.icon||'geren1'" /> {{item.children[0].name}}
17-
</el-menu-item>
18-
</router-link>
19-
</template>
2+
<el-menu mode="vertical" theme="dark" :default-active="$route.path">
3+
<sidebar-item :routes='permission_routers'></sidebar-item>
204
</el-menu>
215
</template>
226

237
<script>
248
import { mapGetters } from 'vuex';
25-
9+
import SidebarItem from './SidebarItem';
2610
export default {
27-
name: 'Sidebar',
11+
components:{SidebarItem},
2812
computed: {
2913
...mapGetters([
3014
'permission_routers'
3115
])
3216
}
3317
}
3418
</script>
35-
3619
<style rel="stylesheet/scss" lang="scss" scoped>
3720
.el-menu {
3821
min-height: 100%;
3922
}
40-
.wscn-icon {
41-
margin-right: 10px;
42-
}
43-
.hideSidebar .title-link{
44-
display: block;
45-
text-indent: 10px;
46-
}
4723
</style>

‎src/views/layout/SidebarItem.vue

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<template>
2+
<div>
3+
<template v-for="item in routes">
4+
<router-link v-if="!item.hidden&&item.noDropdown&&item.children.length>0" :to="item.path+'/'+item.children[0].path">
5+
<el-menu-item :index="item.path+'/'+item.children[0].path">
6+
<wscn-icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.children[0].name}}
7+
</el-menu-item>
8+
</router-link>
9+
<el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
10+
<template slot="title">
11+
<wscn-icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.name}}
12+
</template>
13+
<template v-for="child in item.children" v-if='!child.hidden'>
14+
<sidebar-item class='menu-indent' v-if='child.children&&child.children.length>0' :routes='[child]'> </sidebar-item>
15+
<router-link v-else class="menu-indent" :to="item.path+'/'+child.path">
16+
<el-menu-item :index="item.path+'/'+child.path">
17+
{{child.name}}
18+
</el-menu-item>
19+
</router-link>
20+
</template>
21+
</el-submenu>
22+
</template>
23+
</div>
24+
</template>
25+
26+
<script>
27+
28+
export default {
29+
name: 'SidebarItem',
30+
props: {
31+
routes: {
32+
type: Array
33+
}
34+
}
35+
}
36+
</script>
37+
<style rel="stylesheet/scss" lang="scss" scoped>
38+
.wscn-icon {
39+
margin-right: 10px;
40+
}
41+
.hideSidebar .menu-indent{
42+
display: block;
43+
text-indent: 10px;
44+
}
45+
</style>
46+

0 commit comments

Comments
 (0)