使用vite的 GlobImport 动态导入多个vue页面
在使用vite实现后台管理系统的时候,有个需求是动态导入views文件夹下面的所有页面,vite提供了一个Glob Import方法。
如果直接使用import.meta.glob,vscode会报类型ImportMeta上不存在属性“glob”的错误,需要在tsconfig文件下添加类型定义vite/client
{
"compilerOptions": {
"types": ["vite/client"]
}
}
之前的代码
export function filterAsyncRoutes(routes, roles) {
const res = []
routes.forEach(route => {
const tmp = {...route}
//if (hasPermission(roles, tmp)) {
const component = tmp.component
if (route.component) {
if (component == 'Layout') {
tmp.component = Layout
} else {
tmp.component = (resolve) => require([`@/views/${component}`], resolve)
}
if (tmp.children) {
tmp.children = filterAsyncRoutes(tmp.children, roles)
}
}
res.push(tmp)
//}
})
return res
}
使用import.meta.glob 改写代码,动态添加
const modules = import.meta.glob('../../views/**/**.vue');
export const filterAsyncRoutes = (
routes: RouteRecordRaw[],
roles: string[]
) => {
const res: RouteRecordRaw[] = [];
routes.forEach(route => {
const tmp = { ...route } as any;
// if (hasPermission(roles, tmp)) { // 目前没有给菜单设置权限,所以暂时去掉
if (tmp.component == 'Layout') {
tmp.component = Layout;
} else {
const component = modules[`../../views/${tmp.component}.vue`] as any;
if (component) {
tmp.component = modules[`../../views/${tmp.component}.vue`];
} else {
tmp.component = modules[`../../views/error-page/404.vue`];
}
}
res.push(tmp);
if (tmp.children) {
tmp.children = filterAsyncRoutes(tmp.children, roles);
}
// }
});
return res;
};