vite动态导入页面动态import组件

在做权限的时候

从后台拉路由表，然后动态引入组件，之前webpack是可以直接用的，但是vite不行，需要用特殊的方法

//引入所有views下.vue文件
const modules = import.meta.glob("../views/**/**.vue");
/**
* 解析路由表
* @param routerMap 后台请求的路由表
* @returns 系统路由
*/
export const routerFilterFunc = (routerMap: RouterItem[]) => {
const arr: RouterItem[] = [];
routerMap.forEach(item => {
const obj: RouterItem = {
...item,
beforeComponent: item.component
};
if (obj.children) {
obj.children = routerFilterFunc(obj.children);
}
if (item.component == "Layout") {
obj.component = RouterView;
} else {
const component = modules[`../views/${obj.component}.vue`] as any;
if (component) {
obj.component = modules[`../views/${obj.component}.vue`];
} else {
obj.component = () => import("@/views/404.vue");
}
}
arr.push(obj);
});
return arr;
};

这是

import.meta.glob("../views/**/**.vue")

获取的内容

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。

声明：本站（华域联盟www.cnhackhy.com）所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。