Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
有来技术
vue3-element-admin
提交
c68479e3
V
vue3-element-admin
项目概览
有来技术
/
vue3-element-admin
通知
3
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue3-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
c68479e3
编写于
2月 11, 2023
作者:
H
haoxr
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refactor: 路由代码优化和完善注释
Former-commit-id:
859d3b74
上级
e8d931f8
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
38 addition
and
48 deletion
+38
-48
src/layout/components/Sidebar/SidebarItem.vue
src/layout/components/Sidebar/SidebarItem.vue
+36
-24
src/router/index.ts
src/router/index.ts
+0
-5
src/store/modules/permission.ts
src/store/modules/permission.ts
+1
-0
src/styles/index.scss
src/styles/index.scss
+1
-1
src/styles/sidebar.scss
src/styles/sidebar.scss
+0
-18
未找到文件。
src/layout/components/Sidebar/SidebarItem.vue
浏览文件 @
c68479e3
<
script
setup
lang=
"ts"
>
<
script
setup
lang=
"ts"
>
import
{
ref
}
from
'
vue
'
;
import
path
from
'
path-browserify
'
;
import
path
from
'
path-browserify
'
;
import
{
isExternal
}
from
'
@/utils/validate
'
;
import
{
isExternal
}
from
'
@/utils/validate
'
;
import
AppLink
from
'
./Link.vue
'
;
import
AppLink
from
'
./Link.vue
'
;
...
@@ -8,50 +7,65 @@ import { translateRouteTitleI18n } from '@/utils/i18n';
...
@@ -8,50 +7,65 @@ import { translateRouteTitleI18n } from '@/utils/i18n';
import
SvgIcon
from
'
@/components/SvgIcon/index.vue
'
;
import
SvgIcon
from
'
@/components/SvgIcon/index.vue
'
;
const
props
=
defineProps
({
const
props
=
defineProps
({
/**
* 路由(eg:level_3_1)
*/
item
:
{
item
:
{
type
:
Object
,
type
:
Object
,
required
:
true
required
:
true
},
},
isNest
:
{
type
:
Boolean
,
/**
required
:
false
* 父层级完整路由路径(eg:/level/level_3/level_3_1)
},
*/
basePath
:
{
basePath
:
{
type
:
String
,
type
:
String
,
required
:
true
required
:
true
}
}
});
});
const
onlyOneChild
=
ref
();
const
onlyOneChild
=
ref
();
// 临时变量,记录仅显示的一个子路由的信息
function
hasOneShowingChild
(
children
=
[]
as
any
,
parent
:
any
)
{
/**
if
(
!
children
)
{
* 判断当前路由是否只有一个子路由需要显示
children
=
[];
*
}
* 1:如果只有一个子路由,当前路由直接显示子路由
* 2:如果无子路由,显示当前路由
*
* @param children 子路由数组
* @param parent 当前路由
*/
function
hasOneShowingChild
(
children
=
[],
parent
:
any
)
{
// 需要显示的子路由数组
const
showingChildren
=
children
.
filter
((
item
:
any
)
=>
{
const
showingChildren
=
children
.
filter
((
item
:
any
)
=>
{
if
(
item
.
meta
&&
item
.
meta
.
hidden
)
{
if
(
item
.
meta
?.
hidden
)
{
// 过滤不显示的子路由
return
false
;
return
false
;
}
else
{
}
else
{
//
Temp set(will be used if only has one showing child)
//
仅有一个子路由生效,其他情况设置无效
onlyOneChild
.
value
=
item
;
onlyOneChild
.
value
=
item
;
return
true
;
return
true
;
}
}
});
});
//
When there is only one child router, the child router is displayed by default
//
1:如果只有一个子路由,当前路由直接显示子路由
if
(
showingChildren
.
length
===
1
)
{
if
(
showingChildren
.
length
===
1
)
{
return
true
;
return
true
;
}
}
//
Show parent if there are no child router to display
//
2:如果无子路由,显示当前路由
if
(
showingChildren
.
length
===
0
)
{
if
(
showingChildren
.
length
===
0
)
{
onlyOneChild
.
value
=
{
...
parent
,
path
:
''
,
noShowingChildren
:
true
};
onlyOneChild
.
value
=
{
...
parent
,
path
:
''
,
noShowingChildren
:
true
};
return
true
;
return
true
;
}
}
return
false
;
return
false
;
}
}
/**
* 解析路径
*
* @param routePath 路由路径
*/
function
resolvePath
(
routePath
:
string
)
{
function
resolvePath
(
routePath
:
string
)
{
if
(
isExternal
(
routePath
))
{
if
(
isExternal
(
routePath
))
{
return
routePath
;
return
routePath
;
...
@@ -59,23 +73,22 @@ function resolvePath(routePath: string) {
...
@@ -59,23 +73,22 @@ function resolvePath(routePath: string) {
if
(
isExternal
(
props
.
basePath
))
{
if
(
isExternal
(
props
.
basePath
))
{
return
props
.
basePath
;
return
props
.
basePath
;
}
}
return
path
.
resolve
(
props
.
basePath
,
routePath
);
// 完整路径 = 父级路径(/level/level_3) + 路由路径
const
fullPath
=
path
.
resolve
(
props
.
basePath
,
routePath
);
return
fullPath
;
}
}
</
script
>
</
script
>
<
template
>
<
template
>
<div
v-if=
"!item.meta || !item.meta.hidden"
>
<div
v-if=
"!item.meta || !item.meta.hidden"
>
<!-- 当前路由不包含子路由显示 -->
<template
<template
v-if=
"
v-if=
"
hasOneShowingChild(item.children, item) &&
hasOneShowingChild(item.children, item) &&
(!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
(!onlyOneChild.children || onlyOneChild.noShowingChildren)
(!item.meta || !item.meta.alwaysShow)
"
"
>
>
<app-link
v-if=
"onlyOneChild.meta"
:to=
"resolvePath(onlyOneChild.path)"
>
<app-link
v-if=
"onlyOneChild.meta"
:to=
"resolvePath(onlyOneChild.path)"
>
<el-menu-item
<el-menu-item
:index=
"resolvePath(onlyOneChild.path)"
>
:index=
"resolvePath(onlyOneChild.path)"
:class=
"
{ 'submenu-title-noDropdown': !isNest }"
>
<svg-icon
<svg-icon
v-if=
"onlyOneChild.meta && onlyOneChild.meta.icon"
v-if=
"onlyOneChild.meta && onlyOneChild.meta.icon"
:icon-class=
"onlyOneChild.meta.icon"
:icon-class=
"onlyOneChild.meta.icon"
...
@@ -87,8 +100,8 @@ function resolvePath(routePath: string) {
...
@@ -87,8 +100,8 @@ function resolvePath(routePath: string) {
</app-link>
</app-link>
</template>
</template>
<!-- 当前路由包含子路显示 -->
<el-sub-menu
v-else
:index=
"resolvePath(item.path)"
popper-append-to-body
>
<el-sub-menu
v-else
:index=
"resolvePath(item.path)"
popper-append-to-body
>
<!-- popper-append-to-body -->
<
template
#title
>
<
template
#title
>
<svg-icon
<svg-icon
v-if=
"item.meta && item.meta.icon"
v-if=
"item.meta && item.meta.icon"
...
@@ -103,7 +116,6 @@ function resolvePath(routePath: string) {
...
@@ -103,7 +116,6 @@ function resolvePath(routePath: string) {
v-for=
"child in item.children"
v-for=
"child in item.children"
:key=
"child.path"
:key=
"child.path"
:item=
"child"
:item=
"child"
:is-nest=
"true"
:base-path=
"resolvePath(child.path)"
:base-path=
"resolvePath(child.path)"
/>
/>
</el-sub-menu>
</el-sub-menu>
...
...
src/router/index.ts
浏览文件 @
c68479e3
...
@@ -43,11 +43,6 @@ export const constantRoutes: RouteRecordRaw[] = [
...
@@ -43,11 +43,6 @@ export const constantRoutes: RouteRecordRaw[] = [
path
:
'
/404
'
,
path
:
'
/404
'
,
component
:
()
=>
import
(
'
@/views/error-page/404.vue
'
),
component
:
()
=>
import
(
'
@/views/error-page/404.vue
'
),
meta
:
{
hidden
:
true
}
meta
:
{
hidden
:
true
}
},
{
path
:
'
/apidoc
'
,
component
:
()
=>
import
(
'
@/views/demo/apidoc.vue
'
),
meta
:
{
hidden
:
true
}
}
}
]
]
}
}
...
...
src/store/modules/permission.ts
浏览文件 @
c68479e3
...
@@ -46,6 +46,7 @@ const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
...
@@ -46,6 +46,7 @@ const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
if
(
hasPermission
(
roles
,
tmpRoute
))
{
if
(
hasPermission
(
roles
,
tmpRoute
))
{
if
(
tmpRoute
.
component
?.
toString
()
==
'
Layout
'
)
{
if
(
tmpRoute
.
component
?.
toString
()
==
'
Layout
'
)
{
tmpRoute
.
component
=
Layout
;
tmpRoute
.
component
=
Layout
;
console
.
log
();
}
else
{
}
else
{
const
component
=
modules
[
`../../views/
${
tmpRoute
.
component
}
.vue`
];
const
component
=
modules
[
`../../views/
${
tmpRoute
.
component
}
.vue`
];
if
(
component
)
{
if
(
component
)
{
...
...
src/styles/index.scss
浏览文件 @
c68479e3
...
@@ -20,7 +20,7 @@ html.dark{
...
@@ -20,7 +20,7 @@ html.dark{
--menuBg
:var
(
--el-bg-color-overlay
)
;
--menuBg
:var
(
--el-bg-color-overlay
)
;
--menuText
:var
(
----el-menu-text-color
)
;
--menuText
:var
(
----el-menu-text-color
)
;
--menuActiveText
:var
(
--el-menu-active-color
)
;
--menuActiveText
:var
(
--el-menu-active-color
)
;
--
subMenuHover
:
rgba
(
0
,
0
,
0
,.
3
);
--
menuHover
:rgba
(
0
,
0
,
0
,
.2
)
;
--subMenuBg
:
var
(
--
el-menu-bg-color
);
--subMenuBg
:
var
(
--
el-menu-bg-color
);
--subMenuActiveText
:var
(
--el-menu-active-color
)
;
--subMenuActiveText
:var
(
--el-menu-active-color
)
;
...
...
src/styles/sidebar.scss
浏览文件 @
c68479e3
...
@@ -63,7 +63,6 @@
...
@@ -63,7 +63,6 @@
}
}
// menu hover
// menu hover
.submenu-title-noDropdown
,
.el-sub-menu__title
{
.el-sub-menu__title
{
&
:hover
{
&
:hover
{
background-color
:
$menuHover
!
important
;
background-color
:
$menuHover
!
important
;
...
@@ -98,23 +97,6 @@
...
@@ -98,23 +97,6 @@
margin-left
:
54px
;
margin-left
:
54px
;
}
}
.submenu-title-noDropdown
{
padding
:
0
!
important
;
position
:
relative
;
.el-tooltip
{
padding
:
0
!
important
;
.svg-icon
{
margin-left
:
20px
;
}
.sub-el-icon
{
margin-left
:
19px
;
}
}
}
.el-sub-menu
{
.el-sub-menu
{
overflow
:
hidden
;
overflow
:
hidden
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录