vue-ts动态组件与路由

首先得有一个路由数组 1.得有一个文件地址指向比如 component 这个字段它指向了某一文件夹下的具体文件

"component": "/Home/children/HomeAnalytics",

2.运用import.meta.glob导出views下面的所有vue文件(注意文件夹名字以及路径匹配上)

// 导入所有 views 文件夹下的 Vue 文件
const modules = import.meta.glob("../../views/**/*.vue");

3.打印一下models这时候他是以文件名为key组件为value的对象

4.调用这个工具函数将json文件转换为路由对象动态添加进去(取models的时候可以先打印一下key因为他对文件地址有严格要求，"/src/","@/","../", ../../views/**/*.vue 这里面用的啥你就最好用啥)

const processMenuItem = (item: Menu.MenuOptions): Menu.MenuOptions | null => {
    // 验证菜单项
    if (!validateMenuItem(item)) {
        return null;
    }

    // 创建副本避免修改原数据
    const processedItem = {...item};

    // 处理组件路径
    if (processedItem.component && typeof processedItem.component === "string") {
        const componentPath = processedItem.component;

        processedItem.component = modules[`../../views${componentPath}.vue`];
    }

    // 递归处理子路由
    if (processedItem.children && processedItem.children.length > 0) {
        processedItem.children = processedItem.children
            .map((child: Menu.MenuOptions) => {
                const processedChild = processMenuItem(child);
                if (processedChild) {
                    // 将子路由的绝对路径转换为相对路径
                    if (processedChild.path && processedChild.path.startsWith('/')) {
                        // 提取相对于父路由的路径部分
                        const parentPath = processedItem.path || '';
                        if (processedChild.path.startsWith(parentPath + '/')) {
                            processedChild.path = processedChild.path.substring(parentPath.length + 1);
                        }
                    }
                }
                return processedChild;
            })
            .filter((child): child is Menu.MenuOptions => child !== null);
    }

    return processedItem;
};

路由对象转换类型