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

1,在做权限的时候,从后台拉路由表,然后动态引入组件,之前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")获取的内容

vite 动态导入页面 动态import组件_第1张图片

 

你可能感兴趣的:(web,vue.js,javascript)