feat: keepAlive优化

2023-05-17 23:43:05 +08:00
parent 60035767ad
commit d10127eafc
3 changed files with 96 additions and 82 deletions
--- 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<string> = [];
-	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<string> = [];
+    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}&params=${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}&params=${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();
 });

 // 导出路由
--- a/web/src/utils/menu.ts
+++ b/web/src/utils/menu.ts
@@ -12,7 +12,7 @@ export const handleMenu = (menuData: Array<any>) => {
            title: item.title,
            isLink: item.is_link,
            isHide: !item.visible,
-            isKeepAlive: true,
+            isKeepAlive: item.cache,
            isAffix: false,
            isIframe: false,
            roles: ['admin'],
--- a/web/src/views/system/menu/index.vue
+++ b/web/src/views/system/menu/index.vue
@@ -71,6 +71,12 @@
                                <el-radio :label="false">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
+                        <el-form-item label="缓存">
+                            <el-radio-group v-model="form.cache">
+                                <el-radio :label="true">启用</el-radio>
+                                <el-radio :label="false">禁用</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
                        <el-form-item label="图标" prop="icon">
                            <IconSelector clearable v-model="form.icon"/>
                        </el-form-item>
@@ -227,11 +233,12 @@ let form: Form<any> = reactive({
    component: '',
    web_path: '',
    sort: '',
-    status: '',
+    status: true,
    is_catalog: false,
    permission: '',
    icon: '',
-    visible: ''
+    visible: true,
+    cache: true,
 });

 let menuPermissonList = ref([]);