From d10127eafc405b6e4f7a4b2b68c14213b811a4da Mon Sep 17 00:00:00 2001 From: H0nGzA1 <2505811377@qq.com> Date: Wed, 17 May 2023 23:43:05 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20keepAlive=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/router/index.ts | 165 +++++++++++++++------------- web/src/utils/menu.ts | 2 +- web/src/views/system/menu/index.vue | 11 +- 3 files changed, 96 insertions(+), 82 deletions(-) diff --git a/web/src/router/index.ts b/web/src/router/index.ts index da607b1..b1dba30 100644 --- a/web/src/router/index.ts +++ b/web/src/router/index.ts @@ -1,15 +1,15 @@ -import { createRouter, createWebHashHistory } from 'vue-router'; +import {createRouter, createWebHashHistory} from 'vue-router'; import NProgress from 'nprogress'; import 'nprogress/nprogress.css'; import pinia from '/@/stores/index'; -import { storeToRefs } from 'pinia'; -import { useKeepALiveNames } from '/@/stores/keepAliveNames'; -import { useRoutesList } from '/@/stores/routesList'; -import { useThemeConfig } from '/@/stores/themeConfig'; -import { Session } from '/@/utils/storage'; -import { staticRoutes } from '/@/router/route'; -import { initFrontEndControlRoutes } from '/@/router/frontEnd'; -import { initBackEndControlRoutes } from '/@/router/backEnd'; +import {storeToRefs} from 'pinia'; +import {useKeepALiveNames} from '/@/stores/keepAliveNames'; +import {useRoutesList} from '/@/stores/routesList'; +import {useThemeConfig} from '/@/stores/themeConfig'; +import {Session} from '/@/utils/storage'; +import {staticRoutes} from '/@/router/route'; +import {initFrontEndControlRoutes} from '/@/router/frontEnd'; +import {initBackEndControlRoutes} from '/@/router/backEnd'; /** * 1、前端控制路由时：isRequestRoutes 为 false，需要写 roles，需要走 setFilterRoute 方法。 @@ -22,8 +22,8 @@ import { initBackEndControlRoutes } from '/@/router/backEnd'; // 读取 `/src/stores/themeConfig.ts` 是否开启后端控制路由配置 const storesThemeConfig = useThemeConfig(pinia); -const { themeConfig } = storeToRefs(storesThemeConfig); -const { isRequestRoutes } = themeConfig.value; +const {themeConfig} = storeToRefs(storesThemeConfig); +const {isRequestRoutes} = themeConfig.value; /** * 创建一个可以被 Vue 应用程序使用的路由实例 @@ -31,8 +31,8 @@ const { isRequestRoutes } = themeConfig.value; * @link 参考：https://next.router.vuejs.org/zh/api/#createrouter */ export const router = createRouter({ - history: createWebHashHistory(), - routes: staticRoutes, + history: createWebHashHistory(), + routes: staticRoutes, }); /** @@ -41,13 +41,13 @@ export const router = createRouter({ * @returns 返回处理后的一维路由菜单数组 */ export function formatFlatteningRoutes(arr: any) { - if (arr.length <= 0) return false; - for (let i = 0; i < arr.length; i++) { - if (arr[i].children) { - arr = arr.slice(0, i + 1).concat(arr[i].children, arr.slice(i + 1)); - } - } - return arr; + if (arr.length <= 0) return false; + for (let i = 0; i < arr.length; i++) { + if (arr[i].children) { + arr = arr.slice(0, i + 1).concat(arr[i].children, arr.slice(i + 1)); + } + } + return arr; } /** @@ -58,73 +58,80 @@ export function formatFlatteningRoutes(arr: any) { * @returns 返回将一维数组重新处理成 `定义动态路由（dynamicRoutes）` 的格式 */ export function formatTwoStageRoutes(arr: any) { - if (arr.length <= 0) return false; - const newArr: any = []; - const cacheList: Array = []; - arr.forEach((v: any) => { - if (v.path === '/') { - newArr.push({ component: v.component, name: v.name, path: v.path, redirect: v.redirect, meta: v.meta, children: [] }); - } else { - // 判断是否是动态路由（xx/:id/:name），用于 tagsView 等中使用 - // 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G - if (v.path.indexOf('/:') > -1) { - v.meta['isDynamic'] = true; - v.meta['isDynamicPath'] = v.path; - } - newArr[0].children.push({ ...v }); - // 存 name 值，keep-alive 中 include 使用，实现路由的缓存 - // 路径：/@/layout/routerView/parent.vue - if (newArr[0].meta.isKeepAlive && v.meta.isKeepAlive) { - cacheList.push(v.name); - const stores = useKeepALiveNames(pinia); - stores.setCacheKeepAlive(cacheList); - } - } - }); - return newArr; + if (arr.length <= 0) return false; + const newArr: any = []; + const cacheList: Array = []; + arr.forEach((v: any) => { + if (v.path === '/') { + newArr.push({ + component: v.component, + name: v.name, + path: v.path, + redirect: v.redirect, + meta: v.meta, + children: [] + }); + } else { + // 判断是否是动态路由（xx/:id/:name），用于 tagsView 等中使用 + // 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G + if (v.path.indexOf('/:') > -1) { + v.meta['isDynamic'] = true; + v.meta['isDynamicPath'] = v.path; + } + newArr[0].children.push({...v}); + // 存 name 值，keep-alive 中 include 使用，实现路由的缓存 + // 路径：/@/layout/routerView/parent.vue + if (newArr[0].meta.isKeepAlive && v.meta.isKeepAlive && v.component_name != "") { + cacheList.push(v.name); + const stores = useKeepALiveNames(pinia); + stores.setCacheKeepAlive(cacheList); + } + } + }); + return newArr; } // 路由加载前 router.beforeEach(async (to, from, next) => { - NProgress.configure({ showSpinner: false }); - if (to.meta.title) NProgress.start(); - const token = Session.get('token'); - if (to.path === '/login' && !token) { - next(); - NProgress.done(); - } else { - if (!token) { - next(`/login?redirect=${to.path}¶ms=${JSON.stringify(to.query ? to.query : to.params)}`); - Session.clear(); - NProgress.done(); - } else if (token && to.path === '/login') { - next('/home'); - NProgress.done(); - } else { - const storesRoutesList = useRoutesList(pinia); - const { routesList } = storeToRefs(storesRoutesList); - if (routesList.value.length === 0) { - if (isRequestRoutes) { - // 后端控制路由：路由数据初始化，防止刷新时丢失 - await initBackEndControlRoutes(); - // 动态添加路由：防止非首页刷新时跳转回首页的问题 - // 确保 addRoute() 时动态添加的路由已经被完全加载上去 - next({ ...to, replace: true }); - } else { - // https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP - await initFrontEndControlRoutes(); - next({ ...to, replace: true }); - } - } else { - next(); - } - } - } + NProgress.configure({showSpinner: false}); + if (to.meta.title) NProgress.start(); + const token = Session.get('token'); + if (to.path === '/login' && !token) { + next(); + NProgress.done(); + } else { + if (!token) { + next(`/login?redirect=${to.path}¶ms=${JSON.stringify(to.query ? to.query : to.params)}`); + Session.clear(); + NProgress.done(); + } else if (token && to.path === '/login') { + next('/home'); + NProgress.done(); + } else { + const storesRoutesList = useRoutesList(pinia); + const {routesList} = storeToRefs(storesRoutesList); + if (routesList.value.length === 0) { + if (isRequestRoutes) { + // 后端控制路由：路由数据初始化，防止刷新时丢失 + await initBackEndControlRoutes(); + // 动态添加路由：防止非首页刷新时跳转回首页的问题 + // 确保 addRoute() 时动态添加的路由已经被完全加载上去 + next({...to, replace: true}); + } else { + // https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP + await initFrontEndControlRoutes(); + next({...to, replace: true}); + } + } else { + next(); + } + } + } }); // 路由加载后 router.afterEach(() => { - NProgress.done(); + NProgress.done(); }); // 导出路由 diff --git a/web/src/utils/menu.ts b/web/src/utils/menu.ts index 8afd40e..9de5a0e 100644 --- a/web/src/utils/menu.ts +++ b/web/src/utils/menu.ts @@ -12,7 +12,7 @@ export const handleMenu = (menuData: Array) => { title: item.title, isLink: item.is_link, isHide: !item.visible, - isKeepAlive: true, + isKeepAlive: item.cache, isAffix: false, isIframe: false, roles: ['admin'], diff --git a/web/src/views/system/menu/index.vue b/web/src/views/system/menu/index.vue index 95dcf75..6feef5c 100644 --- a/web/src/views/system/menu/index.vue +++ b/web/src/views/system/menu/index.vue @@ -71,6 +71,12 @@ 禁用 + + + 启用 + 禁用 + + @@ -227,11 +233,12 @@ let form: Form = reactive({ component: '', web_path: '', sort: '', - status: '', + status: true, is_catalog: false, permission: '', icon: '', - visible: '' + visible: true, + cache: true, }); let menuPermissonList = ref([]);