Skip to content

Commit aa7eab5

Browse files
bowencoolPanJiaChen
bowencool
authored and
PanJiaChen
committed
refactor(SidebarItem): optimizate SidebarItem (#845)
* refactor(sidebar-item): optimizate SiderbarItem. * chore: update nested examples. * fix: fix a wrong path. * fix: fix a transition bug. * fix: fix a wrong path. * perf: using "router" mode of el-menu. * Revert "perf: using "router" mode of el-menu." This reverts commit cef02a3. * fix: complement i18n text.
1 parent 77cb6b1 commit aa7eab5

File tree

16 files changed

+113
-51
lines changed

16 files changed

+113
-51
lines changed

Diff for: ‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ dist/
44
npm-debug.log*
55
yarn-debug.log*
66
yarn-error.log*
7+
**/*.log
78

89
test/unit/coverage
910
test/e2e/reports

Diff for: ‎src/lang/en.js

+7-3
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,13 @@ export default {
2929
mixChart: 'Mix Chart',
3030
example: 'Example',
3131
nested: 'Nested Routes',
32-
bar: 'Bar',
33-
barProfile: 'Profile',
34-
barPosts: 'Posts',
32+
menu1: 'Menu 1',
33+
'menu1-1': 'Menu 1-1',
34+
'menu1-2': 'Menu 1-2',
35+
'menu1-2-1': 'Menu 1-2-1',
36+
'menu1-2-2': 'Menu 1-2-2',
37+
'menu1-3': 'Menu 1-3',
38+
menu2: 'Menu 2',
3539
Table: 'Table',
3640
dynamicTable: 'Dynamic Table',
3741
dragTable: 'Drag Table',

Diff for: ‎src/lang/zh.js

+7-3
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,13 @@ export default {
2929
mixChart: '混合图表',
3030
example: '综合实例',
3131
nested: '路由嵌套',
32-
bar: 'Bar',
33-
barProfile: 'Profile',
34-
barPosts: 'Posts',
32+
menu1: '菜单1',
33+
'menu1-1': '菜单1-1',
34+
'menu1-2': '菜单1-2',
35+
'menu1-2-1': '菜单1-2-1',
36+
'menu1-2-2': '菜单1-2-2',
37+
'menu1-3': '菜单1-3',
38+
menu2: '菜单2',
3539
Table: 'Table',
3640
dynamicTable: '动态Table',
3741
dragTable: '拖拽Table',

Diff for: ‎src/router/index.js

+38-13
Original file line numberDiff line numberDiff line change
@@ -202,32 +202,57 @@ export const asyncRouterMap = [
202202
{
203203
path: '/nested',
204204
component: Layout,
205-
redirect: '/nested/bar/profile',
205+
redirect: '/nested/menu1',
206206
name: 'nested',
207207
meta: {
208208
title: 'nested',
209209
icon: 'nested'
210210
},
211211
children: [
212212
{
213-
path: '/nested/bar', // Must write the full path
214-
component: () => import('@/views/nested/bar/index'), // Parent router-view
215-
name: 'bar',
216-
meta: { title: 'bar' },
213+
path: 'menu1',
214+
component: () => import('@/views/nested/menu1/index'), // Parent router-view
215+
name: 'menu1',
216+
meta: { title: 'menu1' },
217217
children: [
218218
{
219-
path: 'profile',
220-
component: () => import('@/views/nested/bar/profile'),
221-
name: 'bar-profile',
222-
meta: { title: 'barProfile' }
219+
path: 'menu1-1',
220+
component: () => import('@/views/nested/menu1/menu1-1'),
221+
name: 'menu1-1',
222+
meta: { title: 'menu1-1' }
223223
},
224224
{
225-
path: 'posts',
226-
component: () => import('@/views/nested/bar/posts'),
227-
name: 'bar-posts',
228-
meta: { title: 'barPosts' }
225+
path: 'menu1-2',
226+
component: () => import('@/views/nested/menu1/menu1-2'),
227+
name: 'menu1-2',
228+
meta: { title: 'menu1-2' },
229+
children: [
230+
{
231+
path: 'menu1-2-1',
232+
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
233+
name: 'menu1-2-1',
234+
meta: { title: 'menu1-2-1' }
235+
},
236+
{
237+
path: 'menu1-2-2',
238+
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
239+
name: 'menu1-2-2',
240+
meta: { title: 'menu1-2-2' }
241+
}
242+
]
243+
},
244+
{
245+
path: 'menu1-3',
246+
component: () => import('@/views/nested/menu1/menu1-3'),
247+
name: 'menu1-3',
248+
meta: { title: 'menu1-3' }
229249
}
230250
]
251+
},
252+
{
253+
path: 'menu2',
254+
component: () => import('@/views/nested/menu2/index'),
255+
meta: { title: 'menu2' }
231256
}
232257
]
233258
},

Diff for: ‎src/views/layout/components/Sidebar/SidebarItem.vue

+18-12
Original file line numberDiff line numberDiff line change
@@ -1,49 +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">{{generateTitle(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">{{generateTitle(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">{{generateTitle(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'
3634
import { generateTitle } from '@/utils/i18n'
3735
3836
export default {
3937
name: 'SidebarItem',
4038
props: {
41-
routes: {
42-
type: Array
39+
item: { // route配置json
40+
type: Object,
41+
required: true
4342
},
4443
isNest: {
4544
type: Boolean,
4645
default: false
46+
},
47+
basePath: {
48+
type: String,
49+
default: ''
4750
}
4851
},
4952
methods: {
@@ -56,6 +59,9 @@ export default {
5659
}
5760
return false
5861
},
62+
resolvePath(...paths) {
63+
return path.resolve(this.basePath, ...paths)
64+
},
5965
generateTitle
6066
}
6167
}

Diff for: ‎src/views/layout/components/Sidebar/index.vue

+1-1
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="permission_routers"></sidebar-item>
12+
<sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
1313
</el-menu>
1414
</el-scrollbar>
1515
</template>

Diff for: ‎src/views/nested/bar/index.vue

-7
This file was deleted.

Diff for: ‎src/views/nested/bar/posts.vue

-6
This file was deleted.

Diff for: ‎src/views/nested/bar/profile.vue

-6
This file was deleted.

Diff for: ‎src/views/nested/menu1/index.vue

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

Diff for: ‎src/views/nested/menu1/menu1-1/index.vue

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

Diff for: ‎src/views/nested/menu1/menu1-2/index.vue

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

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

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

Diff for: ‎src/views/nested/menu1/menu1-2/menu1-2-2/index.vue

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

Diff for: ‎src/views/nested/menu1/menu1-3/index.vue

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

Diff for: ‎src/views/nested/menu2/index.vue

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