react 使用@loadable/component 实现路由动态懒加载

踩坑记录

  • 动态引入import()变量失效问题, import不能导入变量字符串的路径问题
  • 因为webpack的现在的实现方式不能实现完全动态,所以可以通过字符串模板来提供部分信息给webpack,如下
    在这里插入图片描述
/**
 * 根据已经获取的菜单组合需要生成的路由
 * @param list 数据
 * @param parentPath 父级的路径,组合子级可访问路径
 */
const combinationRouting = (list: Menus[], parentPath?: string) => {

  let portMenu: PortfolioMenuType[] = [];
  list.forEach((item: Menus) => {
    const path = parentPath ? parentPath + item.url : item.url;

    const obj: PortfolioMenuType = {
      path,
      component: () => import(`../pages${path}/index`),
      name: item.id,
    };
    // 是否存在子级
    if (item.children && item.children.length > 0) {
      const result: PortfolioMenuType[] = combinationRouting(item.children, item.url);
      portMenu = portMenu.concat(result);
    }
    if (!parentPath) {
      portMenu.push(obj);
    }
  });
  return portMenu;
}

export { combinationRouting }
©️2020 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值