Skip to content

Commit ca2bbfa

Browse files
PanJiaChenPanJiaChen
committed
refactor sidebar && add nested demo
1 parent 44d1cc9 commit ca2bbfa

File tree

11 files changed

+121
-13
lines changed

11 files changed

+121
-13
lines changed

‎src/icons/svg/nested.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/router/index.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,64 @@ export const constantRouterMap = [
7272
]
7373
},
7474

75+
{
76+
path: '/nested',
77+
component: Layout,
78+
redirect: '/nested/menu1',
79+
name: 'nested',
80+
meta: {
81+
title: 'nested',
82+
icon: 'nested'
83+
},
84+
children: [
85+
{
86+
path: 'menu1',
87+
component: () => import('@/views/nested/menu1/index'), // Parent router-view
88+
name: 'menu1',
89+
meta: { title: 'menu1' },
90+
children: [
91+
{
92+
path: 'menu1-1',
93+
component: () => import('@/views/nested/menu1/menu1-1'),
94+
name: 'menu1-1',
95+
meta: { title: 'menu1-1' }
96+
},
97+
{
98+
path: 'menu1-2',
99+
component: () => import('@/views/nested/menu1/menu1-2'),
100+
name: 'menu1-2',
101+
meta: { title: 'menu1-2' },
102+
children: [
103+
{
104+
path: 'menu1-2-1',
105+
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
106+
name: 'menu1-2-1',
107+
meta: { title: 'menu1-2-1' }
108+
},
109+
{
110+
path: 'menu1-2-2',
111+
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
112+
name: 'menu1-2-2',
113+
meta: { title: 'menu1-2-2' }
114+
}
115+
]
116+
},
117+
{
118+
path: 'menu1-3',
119+
component: () => import('@/views/nested/menu1/menu1-3'),
120+
name: 'menu1-3',
121+
meta: { title: 'menu1-3' }
122+
}
123+
]
124+
},
125+
{
126+
path: 'menu2',
127+
component: () => import('@/views/nested/menu2/index'),
128+
meta: { title: 'menu2' }
129+
}
130+
]
131+
},
132+
75133
{ path: '*', redirect: '/404', hidden: true }
76134
]
77135

‎src/views/layout/components/Sidebar/SidebarItem.vue

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,52 @@
11
<template>
2-
<div class="menu-wrapper">
3-
<template v-for="item in routes" v-if="!item.hidden&&item.children">
2+
<div v-if="!item.hidden&&item.children" class="menu-wrapper">
43

5-
<router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" :to="item.path+'/'+item.children[0].path"
6-
:key="item.children[0].name">
7-
<el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
4+
<router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" :to="resolvePath(item.children[0].path)">
5+
<el-menu-item :index="resolvePath(item.children[0].path)" :class="{'submenu-title-noDropdown':!isNest}">
86
<svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
97
<span v-if="item.children[0].meta&&item.children[0].meta.title" slot="title">{{item.children[0].meta.title}}</span>
108
</el-menu-item>
119
</router-link>
1210

13-
<el-submenu v-else :index="item.name||item.path" :key="item.name">
11+
<el-submenu v-else :index="item.name||item.path">
1412
<template slot="title">
1513
<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
1614
<span v-if="item.meta&&item.meta.title" slot="title">{{item.meta.title}}</span>
1715
</template>
1816

1917
<template v-for="child in item.children" v-if="!child.hidden">
20-
<sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :routes="[child]" :key="child.path"></sidebar-item>
18+
<sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :item="child" :key="child.path" :base-path="resolvePath(child.path)"></sidebar-item>
2119

22-
<router-link v-else :to="item.path+'/'+child.path" :key="child.name">
23-
<el-menu-item :index="item.path+'/'+child.path">
20+
<router-link v-else :to="resolvePath(child.path)" :key="child.name">
21+
<el-menu-item :index="resolvePath(child.path)">
2422
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
2523
<span v-if="child.meta&&child.meta.title" slot="title">{{child.meta.title}}</span>
2624
</el-menu-item>
2725
</router-link>
2826
</template>
2927
</el-submenu>
3028

31-
</template>
3229
</div>
3330
</template>
3431

3532
<script>
33+
import path from 'path'
34+
3635
export default {
3736
name: 'SidebarItem',
3837
props: {
39-
routes: {
40-
type: Array
38+
// route配置json
39+
item: {
40+
type: Object,
41+
required: true
4142
},
4243
isNest: {
4344
type: Boolean,
4445
default: false
46+
},
47+
basePath: {
48+
type: String,
49+
default: ''
4550
}
4651
},
4752
methods: {
@@ -53,6 +58,9 @@ export default {
5358
return true
5459
}
5560
return false
61+
},
62+
resolvePath(...paths) {
63+
return path.resolve(this.basePath, ...paths)
5664
}
5765
}
5866
}

‎src/views/layout/components/Sidebar/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
text-color="#bfcbd9"
1010
active-text-color="#409EFF"
1111
>
12-
<sidebar-item :routes="routes"></sidebar-item>
12+
<sidebar-item v-for="route in routes" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
1313
</el-menu>
1414
</el-scrollbar>
1515
</template>

‎src/views/nested/menu1/index.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template >
2+
<div style="padding:30px;">
3+
<el-alert title="menu 1" :closable="false">
4+
<router-view />
5+
</el-alert>
6+
</div>
7+
</template>

‎src/views/nested/menu1/menu1-1/index.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template >
2+
<div style="padding:30px;">
3+
<el-alert title="menu 1-1" type="success" :closable="false">
4+
<router-view />
5+
</el-alert>
6+
</div>
7+
</template>

‎src/views/nested/menu1/menu1-2/index.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<div style="padding:30px;">
3+
<el-alert title="menu 1-2" type="success" :closable="false">
4+
<router-view />
5+
</el-alert>
6+
</div>
7+
</template>

‎src/views/nested/menu1/menu1-2/menu1-2-1/index.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template functional>
2+
<div style="padding:30px;">
3+
<el-alert title="menu 1-2-1" type="warning" :closable="false" />
4+
</div>
5+
</template>

‎src/views/nested/menu1/menu1-2/menu1-2-2/index.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template functional>
2+
<div style="padding:30px;">
3+
<el-alert title="menu 1-2-2" type="warning" :closable="false" />
4+
</div>
5+
</template>

‎src/views/nested/menu1/menu1-3/index.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template functional>
2+
<div style="padding:30px;">
3+
<el-alert title="menu 1-3" type="success" :closable="false" />
4+
</div>
5+
</template>

‎src/views/nested/menu2/index.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div style="padding:30px;">
3+
<el-alert title="menu 2" :closable="false" />
4+
</div>
5+
</template>

0 commit comments

Comments
 (0)