在菜单管理添加分割线，类似这种：
思路：利用空间结构和数据特点来唯一区分出分割线，来划分业务区域
html
<template>
<div>
<h1>Split Line Controller</h1>
<ul>
<li v-for="route in displayedRoutes" :key="route.path">
{{ route.meta?.title || '' }} - {{ route.hidden ? '隐藏' : '显示' }}
<ul v-if="filteredChildren(route).length">
<li v-for="child in filteredChildren(route)" :key="child.path">
------ {{ child.meta?.title || '' }} - {{ child.hidden ? '隐藏' : '显示' }}
</li>
</ul>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "SplitLineController",
data() {
return {
routes: [
{
"path": "/redirect",
"hidden": true,
"children": [
{
"path": "/redirect/:path*"
}
]
},
{
"path": "/login",
"hidden": true
},
{
"path": "/auth-redirect",
"hidden": true
},
{
"path": "/404",
"hidden": true
},
{
"path": "/401",
"hidden": true
},
{
"path": "/",
"redirect": "/home-page",
"hidden": true,
"children": [
{
"path": "home-page",
"name": "HomePage",
"meta": {
"title": "欢迎页",
"icon": "home-page"
}
}
]
},
{
"path": "/profile",
"redirect": "/profile/index",
"hidden": true,
"children": [
{
"path": "index",
"name": "Profile",
"meta": {
"title": "个人中心",
"icon": "user"
}
}
]
},
{
"path": "/home-page",
"hidden": false,
"children": [],
"name": "HomePage",
"meta": {
"title": "首页",
"icon": "home-page"
}
},
{
"path": "/permission",
"hidden": true,
"children": [
{
"path": "/permission/my-application",
"hidden": false,
"children": [],
"name": "MyApplicationManage",
"meta": {
"title": "我的申请",
"icon": "api-monitor"
}
}
],
"name": "",
"meta": {
"title": "权限申请",
"icon": "access"
}
},
{
"path": "",
"hidden": false,
"children": [],
"name": "",
"meta": {
"title": "xx业务分割线1",
"icon": ""
}
},
{
"path": "/apple",
"hidden": false,
"children": [
{
"path": "/apple/tree",
"hidden": false,
"children": [],
"name": "tree",
"meta": {
"title": "苹果树木",
"icon": "nested"
}
},
{
"path": "/apple/leaf",
"hidden": false,
"children": [],
"name": "leaf",
"meta": {
"title": "苹果叶子",
"icon": "alarm-settings"
}
}
],
"name": "AppleContent",
"meta": {
"title": "苹果内容质量",
"icon": "list"
}
},
{
"path": "/banana",
"hidden": false,
"children": [
{
"path": "/banana/tree",
"hidden": false,
"children": [],
"name": "tree",
"meta": {
"title": "香蕉树木",
"icon": "size"
}
},
{
"path": "/banana/leaf",
"hidden": false,
"children": [],
"name": "leaf",
"meta": {
"title": "香蕉叶子",
"icon": "edit"
}
},
],
"name": "",
"meta": {
"title": "香蕉评级后台",
"icon": "peoples"
}
},
{
"path": "",
"hidden": false,
"children": [],
"name": "",
"meta": {
"title": "xx业务分割线2",
"icon": ""
}
},
{
"path": "/cat",
"hidden": false,
"children": [
{
"path": "/cat/live",
"hidden": false,
"children": [],
"name": "Live",
"meta": {
"title": "猫",
"icon": "build"
}
},
{
"path": "/dog/live",
"hidden": false,
"children": [],
"name": "LiveComDistributionMange",
"meta": {
"title": "狗",
"icon": "api-server"
}
}
],
"name": "",
"meta": {
"title": "宠物管理",
"icon": "build"
}
},
{
"path": "",
"hidden": false,
"children": [],
"name": "",
"meta": {
"title": "xx管理分割线3",
"icon": ""
}
},
{
"path": "/person",
"hidden": false,
"children": [
{
"path": "/person/myself",
"hidden": false,
"children": [],
"name": "SysBusinessUserManage",
"meta": {
"title": "我的介绍",
"icon": "people"
}
}
],
"name": "Admin",
"meta": {
"title": "系统管理",
"icon": "api-server"
}
}
],
displayedRoutes: []
};
},
methods: {
controlSplits(routes) {
let displayedRoutes = JSON.parse(JSON.stringify(routes)); // 深拷贝以保持原始结构
for (let i = 0; i < displayedRoutes.length; i++) {
const currentRoute = displayedRoutes[i];
if (this.isSplitLine(currentRoute)) {
let hasVisibleSibling = false;
for (let j = i + 1; j < displayedRoutes.length; j++) {
const nextRoute = displayedRoutes[j];
if (this.isSplitLine(nextRoute)) break;
if (!nextRoute.hidden) {
hasVisibleSibling = true;
break;
}
}
currentRoute.hidden = !hasVisibleSibling;
}
}
return displayedRoutes;
},
isSplitLine(route) {
return route.path === "" && !route.component && route.meta && !route.meta.icon;
},
filteredChildren(route) {
if (route.children) {
return route.children.filter(child => !child.hidden);
}
return [];
}
},
created() {
this.displayedRoutes = this.controlSplits(this.routes);
}
};
</script>
<style scoped>
h1 {
font-size: 20px;
}
ul {
list-style-type: none;
padding: 0;
}
</style>