diff --git a/web/src/router/backEnd.ts b/web/src/router/backEnd.ts index bdeecad..bd786af 100644 --- a/web/src/router/backEnd.ts +++ b/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) - dynamicRoutes[0].children = await backEndComponent(frameIn); + // const {frameIn,frameOut} = handleMenu(res.data) + // 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); }); diff --git a/web/src/router/index.ts b/web/src/router/index.ts index 8276ed1..9bb05bb 100644 --- a/web/src/router/index.ts +++ b/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 diff --git a/web/src/router/route.ts b/web/src/router/route.ts index 35df9f6..0e91baa 100644 --- a/web/src/router/route.ts +++ b/web/src/router/route.ts @@ -88,12 +88,12 @@ export const staticRoutes: Array = [ title: '登录', }, }, - { - path: '/demo', - name: 'demo', - component: () => import('/@/views/system/demo/index.vue'), - meta: { - title: 'message.router.personal' - }, - } + // { + // path: '/demo', + // name: 'demo', + // component: () => import('/@/views/system/demo/index.vue'), + // meta: { + // title: 'message.router.personal' + // }, + // } ]; diff --git a/web/src/stores/frontendMenu.ts b/web/src/stores/frontendMenu.ts index 3251973..15a03cb 100644 --- a/web/src/stores/frontendMenu.ts +++ b/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) => { const frameInRoutes:Array = [] // 框架外路由 const frameOutRoutes:Array = [] + // 需要缓存的路由 + const cacheList:Array = [] // 先处理menu meta数据转换 const handleMeta = (item: any) => { item.path = item.web_path @@ -86,18 +90,24 @@ export const handleMenu = (menuData: Array) => { 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) => { const dynamicRoutes = [ { path: '/home', name: 'home', - component: '/system/home/index', + component: dynamicImport(dynamicViewsModules, '/system/home/index'), meta: { title: 'message.router.home', isLink: '',