docs: 完善路由节点转换菜单注释

Former-commit-id: e8e8b67b6c88a1a030fa7d100c0d0fc79e31afbd
This commit is contained in:
haoxr
2023-02-27 22:19:38 +08:00
parent 19eceed7dd
commit 881c737839

View File

@@ -24,36 +24,34 @@ const props = defineProps({
} }
}); });
const onlyOneChild = ref(); // 临时变量,记录仅显示的一个子路由的信息 const onlyOneChild = ref(); // 临时变量,唯一子路由
/** /**
* 判断当前路由是否只有一个子路由需要显示 * 判断当前路由是否只有一个子路由
* *
* 1如果只有一个子路由,当前路由直接显示子路由 * 1如果只有一个子路由 返回 true
* 2如果无子路由,显示当前路由 * 2如果无子路由 :返回 true
* *
* @param children 子路由数组 * @param children 子路由数组
* @param parent 当前路由 * @param parent 当前路由
*/ */
function hasOneShowingChild(children = [], parent: any) { function hasOneShowingChild(children = [], parent: any) {
// 需要显示的子路由数组 // 需要显示的子路由数组
const showingChildren = children.filter((item: any) => { const showingChildren = children.filter((item: any) => {
if (item.meta?.hidden) { if (item.meta?.hidden) {
// 过滤不显示的子路由 return false; // 过滤不显示的子路由
return false;
} else { } else {
// 仅有一个子路由生效,其他情况设置无效 onlyOneChild.value = item; // 唯一子路由赋值(多个子路由情况 onlyOneChild 变量是用不上的)
onlyOneChild.value = item;
return true; return true;
} }
}); });
// 1如果只有一个子路由,当前路由直接显示子路由 // 1如果只有一个子路由, 返回 true
if (showingChildren.length === 1) { if (showingChildren.length === 1) {
return true; return true;
} }
// 2如果无子路由,显示当前路由 // 2如果无子路由, 复制当前路由信息作为其子路由,满足只拥有一个子路由的条件,所以返回 true
if (showingChildren.length === 0) { if (showingChildren.length === 0) {
onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }; onlyOneChild.value = { ...parent, path: '', noShowingChildren: true };
return true; return true;
@@ -74,13 +72,13 @@ function resolvePath(routePath: string) {
return props.basePath; return props.basePath;
} }
// 完整路径 = 父级路径(/level/level_3) + 路由路径 // 完整路径 = 父级路径(/level/level_3) + 路由路径
const fullPath = path.resolve(props.basePath, routePath); const fullPath = path.resolve(props.basePath, routePath); // 相对路径 → 绝对路径
return fullPath; 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) &&
@@ -100,7 +98,7 @@ function resolvePath(routePath: string) {
</app-link> </app-link>
</template> </template>
<!-- 当前路由包含子路显示 --> <!-- 包含多个子路由 -->
<el-sub-menu v-else :index="resolvePath(item.path)" teleported> <el-sub-menu v-else :index="resolvePath(item.path)" teleported>
<template #title> <template #title>
<svg-icon <svg-icon