feat: 动态创建组件实例时, 设置路由name为组件名 解决缓存问题

dap

2024-06-30 e657a507e3b85d65efb05bf156efef6d7c423781

feat: 动态创建组件实例时, 设置路由name为组件名 解决缓存问题

 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;

 src/utils/createCustomNameComponent.tsx

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,39 @@
/**
 * åŽå°è¿”回的路由动态生成name è§£å†³ç¼“存问题
 * æ„Ÿè°¢ @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);
        }
      })
    );
  };
}