From e657a507e3b85d65efb05bf156efef6d7c423781 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: 星期日, 30 六月 2024 10:50:04 +0800
Subject: [PATCH] feat: 动态创建组件实例时, 设置路由name为组件名 解决缓存问题
---
src/utils/createCustomNameComponent.tsx | 39 +++++++++++++++++++++++++++++++++++++++
src/store/modules/permission.ts | 8 +++++---
2 files changed, 44 insertions(+), 3 deletions(-)
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index 8bab2d8..2e719ba 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -9,6 +9,8 @@
import ParentView from '@/components/ParentView/index.vue';
import InnerLink from '@/layout/components/InnerLink/index.vue';
+import { createCustomNameComponent } from '@/utils/createCustomNameComponent';
+
// 鍖归厤views閲岄潰鎵�鏈夌殑.vue鏂囦欢
const modules = import.meta.glob('./../../views/**/*.vue');
export const usePermissionStore = defineStore('permission', () => {
@@ -82,7 +84,7 @@
} else if (route.component?.toString() === 'InnerLink') {
route.component = InnerLink;
} else {
- route.component = loadView(route.component);
+ route.component = loadView(route.component, route.name as string);
}
if (route.children != null && route.children && route.children.length) {
route.children = filterAsyncRouter(route.children, route, type);
@@ -153,12 +155,12 @@
return res;
};
-export const loadView = (view: any) => {
+export const loadView = (view: any, name: string) => {
let res;
for (const path in modules) {
const dir = path.split('views/')[1].split('.vue')[0];
if (dir === view) {
- res = () => modules[path]();
+ res = createCustomNameComponent(modules[path], { name });
}
}
return res;
diff --git a/src/utils/createCustomNameComponent.tsx b/src/utils/createCustomNameComponent.tsx
new file mode 100644
index 0000000..daf5866
--- /dev/null
+++ b/src/utils/createCustomNameComponent.tsx
@@ -0,0 +1,39 @@
+/**
+ * 鍚庡彴杩斿洖鐨勮矾鐢卞姩鎬佺敓鎴恘ame 瑙ｅ喅缂撳瓨闂
+ * 鎰熻阿 @fourteendp
+ * 璇﹁ https://github.com/vbenjs/vue-vben-admin/issues/3927
+ */
+import { Component, defineComponent, h } from 'vue';
+
+interface Options {
+ name?: string;
+}
+
+export function createCustomNameComponent(loader: () => Promise<any>, options: Options = {}): () => Promise<Component> {
+ const { name } = options;
+ let component: Component | null = null;
+
+ const load = async () => {
+ try {
+ const { default: loadedComponent } = await loader();
+ component = loadedComponent;
+ } catch (error) {
+ console.error(`Cannot resolve component ${name}, error:`, error);
+ }
+ };
+
+ return async () => {
+ if (!component) {
+ await load();
+ }
+
+ return Promise.resolve(
+ defineComponent({
+ name,
+ render() {
+ return h(component as Component);
+ }
+ })
+ );
+ };
+}
--
Gitblit v1.9.3