doubleyong
管理员
管理员
  • 最后登录2025-02-06
  • 发帖数1196
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:2404回复:0

[前端]vite中使用@loadable/component动态路由的实现方法

楼主#
更多 发布于:2022-11-09 14:33
主要不同:

Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块


代码:
import React from 'react';
import loadable from '@loadable/component'
const modules = import.meta.glob('./*/*.js')
 function bindRouter(list) {
    let arr = [];
    list.map((item) => { const path = `./${item.componentPath}.js`


   const ComponentNode = loadable(async () => { return modules[path](); });
        if (item.menuChilds && item.menuChilds.length > 0) {
            if (item.isContainChildren) {
                arr.push({
                    path: item.pathRoute,
                    element: <ComponentNode />,
                    children: [...bindRouter(item.menuChilds)]
                })
            } else {
                arr.push({
                    path: item.pathRoute,
                    //element:<ComponentNode/>
                    children: [...bindRouter(item.menuChilds)]
                })
            }
        } else {
            arr.push({
                path: item.pathRoute,
                element: <ComponentNode />
            })
        }
    })
    return arr;
}


modules 打印效果如下:
modules为一个对象,对应键名为路径名,对应值为一个函数返回import导入的组件

图片:modules.jpg




参考:https://www.pudn.com/news/6228cf499ddf223e1ad13fba.html

最新喜欢:

⌓‿⌓​⌓‿⌓​
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号