路由模块扁平化

UP

src/api/model/system.js

@@ -4,7 +4,7 @@ import http from "@/utils/request"
 export default {
 	menu: {
 		myMenus: {
-			url: `${config.API_URL}/system/menu/my/1.2.8`,
+			url: `${config.API_URL}/system/menu/my/dev`,
 			name: "获取我的菜单",
 			get: async function(){
 				return await http.get(this.url);

src/config/index.js

@@ -2,6 +2,9 @@ const DEFAULT_CONFIG = {
 	//标题
 	APP_NAME: "SCUI",
 
+	//首页地址
+	DASHBOARD_URL: "/dashboard",
+
 	//版本号
 	APP_VER: "1.2.7",
 

src/layout/components/tags.vue

@@ -67,16 +67,28 @@
 			}
 		},
 		created() {
-			const dashboardRoute = this.$router.options.routes[0].children[0].children[0]
+			var menu = this.$TOOL.data.get("MENU")
+			var dashboardRoute = this.treeFind(menu, node => node.path==this.$CONFIG.DASHBOARD_URL)
 			dashboardRoute.fullPath = dashboardRoute.path
-			this.addViewTags(dashboardRoute);
-			this.addViewTags(this.$route);
+			this.addViewTags(dashboardRoute)
+			this.addViewTags(this.$route)
 		},
 		mounted() {
 			this.tagDrop();
 			this.scrollInit()
 		},
 		methods: {
+			//查找树
+			treeFind(tree, func){
+				for (const data of tree) {
+					if (func(data)) return data
+					if (data.children) {
+						const res = this.treeFind(data.children, func)
+						if (res) return res
+					}
+				}
+				return null
+			},
 			//标签拖拽排序
 			tagDrop(){
 				const target = this.$refs.tags

src/layout/components/topbar.vue

@@ -6,7 +6,7 @@
 			</div>
 			<el-breadcrumb separator-class="el-icon-arrow-right" class="hidden-sm-and-down">
 				<transition-group name="breadcrumb" mode="out-in">
-					<template v-for="item in breadList" :key="item.meta.title" >
+					<template v-for="item in breadList" :key="item.title" >
 						<el-breadcrumb-item v-if="item.path!='/' &&  !item.meta.hiddenBreadcrumb" :key="item.meta.title">{{item.meta.title}}</el-breadcrumb-item>
 					</template>
 				</transition-group>
@@ -36,7 +36,7 @@
 		},
 		methods: {
 			getBreadcrumb(){
-				let matched = this.$route.matched;
+				let matched = this.$route.meta.breadcrumb;
 				this.breadList = matched;
 			}
 		}

src/layout/index.vue

@@ -36,7 +36,11 @@
 				<Topbar v-if="!ismobile"></Topbar>
 				<Tags v-if="!ismobile && layoutTags"></Tags>
 				<div class="adminui-main" id="adminui-main">
-					<router-view></router-view>
+					<router-view v-slot="{ Component }">
+					    <keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
+					        <component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow"/>
+					    </keep-alive>
+					</router-view>
 					<iframe-view></iframe-view>
 				</div>
 			</div>
@@ -71,7 +75,11 @@
 				<Topbar v-if="!ismobile"></Topbar>
 				<Tags v-if="!ismobile && layoutTags"></Tags>
 				<div class="adminui-main" id="adminui-main">
-					<router-view></router-view>
+					<router-view v-slot="{ Component }">
+					    <keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
+					        <component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow"/>
+					    </keep-alive>
+					</router-view>
 					<iframe-view></iframe-view>
 				</div>
 			</div>
@@ -101,7 +109,11 @@
 					</el-menu>
 				</div>
 				<div class="adminui-main" id="adminui-main">
-					<router-view></router-view>
+					<router-view v-slot="{ Component }">
+					    <keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
+					        <component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow"/>
+					    </keep-alive>
+					</router-view>
 					<iframe-view></iframe-view>
 				</div>
 			</div>
@@ -143,7 +155,11 @@
 				</Topbar>
 				<Tags v-if="!ismobile && layoutTags"></Tags>
 				<div class="adminui-main" id="adminui-main">
-					<router-view></router-view>
+					<router-view v-slot="{ Component }">
+					    <keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
+					        <component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow"/>
+					    </keep-alive>
+					</router-view>
 					<iframe-view></iframe-view>
 				</div>
 			</div>
@@ -204,8 +220,6 @@
 			this.onLayoutResize();
 			window.addEventListener('resize', this.onLayoutResize);
 			var menu = this.$TOOL.data.get("MENU");
-			var home = this.$router.options.routes[0].children[0];
-			menu.unshift(home);
 			this.menu = this.filterUrl(menu);
 			this.showThis()
 		},
@@ -234,8 +248,7 @@
 			},
 			//路由监听高亮
 			showThis(){
-				var home = this.$router.options.routes[0].children[0];
-				this.pmenu = this.$route.matched[1] || home;
+				this.pmenu = this.$route.meta.breadcrumb ? this.$route.meta.breadcrumb[0] : {}
 				this.nextMenu = this.filterUrl(this.pmenu.children);
 				this.$nextTick(()=>{
 					this.active = this.$route.meta.active || this.$route.fullPath;

src/router/index.js

@@ -16,6 +16,7 @@ const routes_404 = {
 	hidden: true,
 	component: () => import(/* webpackChunkName: "404" */ '@/views/other/404'),
 }
+let routes_404_r = ()=>{}
 
 const router = createRouter({
 	history: createWebHashHistory(),
@@ -29,14 +30,18 @@ document.title = config.APP_NAME
 var isGetApiRouter = false;
 
 router.beforeEach(async (to, from, next) => {
-	NProgress.start()
 
+	NProgress.start()
 	//动态标题
 	document.title = to.meta.title ? `${to.meta.title} - ${config.APP_NAME}` : `${config.APP_NAME}`
 
 	let token = tool.data.get("TOKEN");
 
 	if(to.path === "/login"){
+		//删除路由(替换当前layout路由)
+		router.addRoute(routes[0])
+		//删除路由(404)
+		routes_404_r()
 		isGetApiRouter = false;
 		next();
 		return false;
@@ -53,10 +58,11 @@ router.beforeEach(async (to, from, next) => {
 	if(!isGetApiRouter){
 		let menu = tool.data.get("MENU");
 		var apiRouter = filterAsyncRouter(menu);
+		apiRouter = flatAsyncRoutes(apiRouter)
 		apiRouter.forEach(item => {
 			router.addRoute("layout", item)
 		})
-		router.addRoute(routes_404)
+		routes_404_r = router.addRoute(routes_404)
 		if (to.matched.length == 0) {
 			router.push(to.fullPath);
 		}
@@ -79,7 +85,6 @@ router.onError((error) => {
 	});
 });
 
-
 //转换
 function filterAsyncRouter(routerMap) {
 	const accessedRouters = []
@@ -112,5 +117,30 @@ function loadComponent(component){
 
 }
 
+//路由扁平化
+function flatAsyncRoutes(routes, breadcrumb=[]) {
+	let res = []
+	routes.forEach(route => {
+		const tmp = {...route}
+        if (tmp.children) {
+            let childrenBreadcrumb = [...breadcrumb]
+            childrenBreadcrumb.push(route)
+            let tmpRoute = { ...route }
+            tmpRoute.meta.breadcrumb = childrenBreadcrumb
+            delete tmpRoute.children
+            res.push(tmpRoute)
+            let childrenRoutes = flatAsyncRoutes(tmp.children, childrenBreadcrumb)
+            childrenRoutes.map(item => {
+                res.push(item)
+            })
+        } else {
+            let tmpBreadcrumb = [...breadcrumb]
+            tmpBreadcrumb.push(tmp)
+            tmp.meta.breadcrumb = tmpBreadcrumb
+            res.push(tmp)
+        }
+    })
+    return res
+}
 
 export default router

src/router/systemRouter.js

@@ -1,41 +1,13 @@
+import config from "@/config"
+
 //系统路由
-const routes = [{
+const routes = [
+	{
 		name: "layout",
 		path: "/",
 		component: () => import(/* webpackChunkName: "layout" */ '@/layout'),
-		redirect: '/dashboard',
-		children: [
-			{
-				name: "home",
-				path: "/home",
-				component: () => import(`@/views/other/empty`),
-				meta: {
-					title: "首页",
-					icon: "el-icon-platform-eleme"
-				},
-				children: [
-					{
-						name: "dashboard",
-						path: "/dashboard",
-						meta: {
-							title: "控制台",
-							icon: "el-icon-menu",
-							affix: true
-						},
-						component: () => import(/* webpackChunkName: "home" */ '@/views/home'),
-					},
-					{
-						name: "userCenter",
-						path: "/usercenter",
-						meta: {
-							title: "个人信息",
-							icon: "el-icon-user",
-						},
-						component: () => import(/* webpackChunkName: "usercenter" */ '@/views/userCenter'),
-					}
-				]
-			}
-		]
+		redirect: config.DASHBOARD_URL || '/dashboard',
+		children: []
 	},
 	{
 		path: "/cmd",

src/store/modules/keepAlive.js

@@ -1,6 +1,6 @@
 export default {
 	state: {
-		keepLiveRoute: ['empty'],
+		keepLiveRoute: [],
 		routeKey: null,
 		routeShow: true
 	},
@@ -17,7 +17,7 @@ export default {
 			}
 		},
 		clearKeepLive(state){
-			state.keepLiveRoute = ['empty']
+			state.keepLiveRoute = []
 		},
 		setRouteKey(state, key){
 			state.routeKey = key

src/views/other/404.vue

@@ -6,6 +6,7 @@
 			<h4>啊呀~页面不存在!</h4>
 			<p>您可以先检查网址，然后重新输入或给我们反馈问题。</p>
 			<el-button type="primary" plain round @click="gohome">返回首页</el-button>
+			<el-button type="primary" plain round @click="gologin">重新登录</el-button>
 			<el-button type="primary" round @click="goback">返回上一页</el-button>
 		</el-empty>
 
@@ -20,6 +21,9 @@
 			},
 			goback(){
 				this.$router.go(-1);
+			},
+			gologin(){
+				this.$router.push("/login");
 			}
 		}
 	}

src/views/other/empty.vue

@@ -1,18 +1,3 @@
 <template>
-	<router-view v-slot="{ Component }">
-		<keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
-			<component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow"/>
-		</keep-alive>
-	</router-view>
-</template>
-
-<script>
-	export default {
-		name: 'empty',
-		data() {
-			return {
-
-			}
-		}
-	}
-</script>
+	<router-view></router-view>
+</template>

src/views/userCenter/login.vue

@@ -174,6 +174,14 @@
 					menu = await this.$API.demo.menu.get()
 				}
 				if(menu.code == 200){
+					if(menu.data.menu.length==0){
+						this.islogin = false
+						this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
+							type: 'error',
+							center: true
+						})
+						return false
+					}
 					this.$TOOL.data.set("MENU", menu.data.menu)
 					this.$TOOL.data.set("PERMISSIONS", menu.data.permissions)
 				}else{