新功能: 框架外路由

web/src/router/backEnd.ts

@@ -15,6 +15,8 @@ import { BtnPermissionStore } from '/@/plugin/permission/store.permission';
 import {SystemConfigStore} from "/@/stores/systemConfig";
 import {useDeptInfoStore} from "/@/stores/modules/dept";
 import {DictionaryStore} from "/@/stores/dictionary";
+import {useFrontendMenuStore} from "/@/stores/frontendMenu";
+import {toRaw} from "vue";
 const menuApi = useMenuApi();
 
 const layouModules: any = import.meta.glob('../layout/routerView/*.{vue,tsx}');
@@ -49,14 +51,34 @@ export async function initBackEndControlRoutes() {
 	// https://gitee.com/lyt-top/vue-next-admin/issues/I64HVO
 	if (res.data.length <= 0) return Promise.resolve(true);
 	// 处理路由（component），替换 dynamicRoutes（/@/router/route）第一个顶级 children 的路由
-	const {frameIn,frameOut} = handleMenu(res.data)
+	// const {frameIn,frameOut} = handleMenu(res.data)
-	dynamicRoutes[0].children = await backEndComponent(frameIn);
+	// dynamicRoutes[0].children = await backEndComponent(frameIn);
+	const {frameInRoutes,frameOutRoutes} = await useFrontendMenuStore().getRouter()
+	dynamicRoutes[0].children = toRaw(frameInRoutes)
 	// 添加动态路由
 	await setAddRoute();
 	// 设置路由到 vuex routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
 	await setFilterMenuAndCacheTagsViewRoutes();
 }
 
+export async function setRouters(){
+	const {frameInRoutes,frameOutRoutes} = await useFrontendMenuStore().getRouter()
+	const frameInRouter = toRaw(frameInRoutes)
+	const frameOutRouter = toRaw(frameOutRoutes)
+	dynamicRoutes[0].children = frameInRouter
+	dynamicRoutes.forEach((item:any)=>{
+		router.addRoute(item)
+	})
+	frameOutRouter.forEach((item:any)=>{
+		router.addRoute(item)
+	})
+	const storesRoutesList = useRoutesList(pinia);
+	storesRoutesList.setRoutesList([...dynamicRoutes[0].children,...frameOutRouter]);
+	const storesTagsView = useTagsViewRoutes(pinia);
+	storesTagsView.setTagsViewRoutes([...dynamicRoutes[0].children,...frameOutRouter])
+
+}
+
 /**
  * 设置路由到 vuex routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
  * @description 用于左侧菜单、横向菜单的显示
@@ -74,6 +96,8 @@ export function setFilterMenuAndCacheTagsViewRoutes() {
  */
 export function setCacheTagsViewRoutes() {
 	const storesTagsView = useTagsViewRoutes(pinia);
+	console.log("formatFlatteningRoutes(dynamicRoutes)",formatFlatteningRoutes(dynamicRoutes))
+	console.log("2222",formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))[0].children)
 	storesTagsView.setTagsViewRoutes(formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))[0].children);
 }
 
@@ -83,7 +107,6 @@ export function setCacheTagsViewRoutes() {
  * @returns 返回替换后的路由数组
  */
 export function setFilterRouteEnd() {
-	console.log(dynamicRoutes)
 	let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes));
 	// notFoundAndNoPower 防止 404、401 不在 layout 布局中，不设置的话，404、401 界面将全屏显示
 	// 关联问题 No match found for location with path 'xxx'
@@ -98,6 +121,7 @@ export function setFilterRouteEnd() {
  * @link 参考：https://next.router.vuejs.org/zh/api/#addroute
  */
 export async function setAddRoute() {
+	console.log("啦啦啦啦啦",setFilterRouteEnd())
 	await setFilterRouteEnd().forEach((route: RouteRecordRaw) => {
 		router.addRoute(route);
 	});

web/src/router/index.ts

@@ -7,10 +7,12 @@ import {useKeepALiveNames} from '/@/stores/keepAliveNames';
 import {useRoutesList} from '/@/stores/routesList';
 import {useThemeConfig} from '/@/stores/themeConfig';
 import {Session} from '/@/utils/storage';
-import {notFoundAndNoPower,staticRoutes} from '/@/router/route';
+import {dynamicRoutes, notFoundAndNoPower, staticRoutes} from '/@/router/route';
 import {initFrontEndControlRoutes} from '/@/router/frontEnd';
-import {initBackEndControlRoutes} from '/@/router/backEnd';
+import {initBackEndControlRoutes, setRouters} from '/@/router/backEnd';
 import {useFrontendMenuStore} from "/@/stores/frontendMenu";
+import {useTagsViewRoutes} from "/@/stores/tagsViewRoutes";
+import {toRaw} from "vue";
 
 /**
  * 1、前端控制路由时：isRequestRoutes 为 false，需要写 roles，需要走 setFilterRoute 方法。
@@ -115,10 +117,11 @@ router.beforeEach(async (to, from, next) => {
                 if (isRequestRoutes) {
                     // 后端控制路由：路由数据初始化，防止刷新时丢失
                     await initBackEndControlRoutes();
+                    // await setRouters()
                     // 解决刷新时，一直跳 404 页面问题，关联问题 No match found for location with path 'xxx'
                     // to.query 防止页面刷新时，普通路由带参数时，参数丢失。动态路由（xxx/:id/:name"）isDynamic 无需处理
-                    console.log("缓存的路由",routesList.value)
+                    // console.log("所有路由",router.getRoutes())
-                    console.log("所有路由",router.getRoutes())
+                    // console.log(to.path)
                     next({ path: to.path, query: to.query });
                 } else {
                     // https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP

web/src/router/route.ts

@@ -88,12 +88,12 @@ export const staticRoutes: Array<RouteRecordRaw> = [
 			title: '登录',
 		},
 	},
-	{
+	// {
-		path: '/demo',
+	// 	path: '/demo',
-		name: 'demo',
+	// 	name: 'demo',
-		component: () => import('/@/views/system/demo/index.vue'),
+	// 	component: () => import('/@/views/system/demo/index.vue'),
-		meta: {
+	// 	meta: {
-			title: 'message.router.personal'
+	// 		title: 'message.router.personal'
-		},
+	// 	},
-	}
+	// }
 ];

web/src/stores/frontendMenu.ts

@@ -4,6 +4,8 @@ import {Session} from '/@/utils/storage';
 import {request} from '../utils/service';
 import XEUtils from "xe-utils";
 import {RouteRecordRaw} from "vue-router";
+import {useKeepALiveNames} from "/@/stores/keepAliveNames";
+import pinia from "/@/stores/index";
 
 
 const layouModules: any = import.meta.glob('../layout/routerView/*.{vue,tsx}');
@@ -48,6 +50,8 @@ export const handleMenu = (menuData: Array<any>) => {
     const frameInRoutes:Array<any> = []
     // 框架外路由
     const frameOutRoutes:Array<any> = []
+    // 需要缓存的路由
+    const cacheList:Array<any> = []
     // 先处理menu meta数据转换
     const handleMeta = (item: any) => {
         item.path = item.web_path
@@ -86,18 +90,24 @@ export const handleMenu = (menuData: Array<any>) => {
                 route.component = item.component
                 frameOutRoutes.push(route)
                 item.path = `${item.web_path}FrameOut`
-                item.name =  `frameOut_${item.name}`
+                item.name =  `${item.name}FrameOut`
                 item.meta.isLink = item.web_path
                 item.meta.isIframe = !item.is_iframe
+                //item.meta.isIframeOpen = true
                 item.component = dynamicImport(dynamicViewsModules, 'layout/routerView/link.vue')
             }
         }
         item.children && handleMeta(item.children);
+        if (item.meta.isKeepAlive && item.meta.isKeepAlive && item.component_name != "") {
+            cacheList.push(item.name);
+        }
         return item
     }
     menuData.forEach((val) => {
         frameInRoutes.push(handleMeta(val))
     })
+    const stores = useKeepALiveNames(pinia);
+    stores.setCacheKeepAlive(cacheList);
     const data = XEUtils.toArrayTree(frameInRoutes, {
         parentKey: 'parent',
         strict: true,
@@ -105,7 +115,7 @@ export const handleMenu = (menuData: Array<any>) => {
     const dynamicRoutes = [
         {
             path: '/home', name: 'home',
-            component: '/system/home/index',
+            component: dynamicImport(dynamicViewsModules, '/system/home/index'),
             meta: {
                 title: 'message.router.home',
                 isLink: '',