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")获取的内容

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值