在菜单管理添加分割线，类似这种：
思路：利用空间结构和数据特点来唯一区分出分割线，来划分业务区域
<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>