Umi + qiankun 实现动态加载子应用路由

Umi + qiankun 实现动态加载子应用路由,第1张

  最近在做项目重构的事情,原来的一个Vue项目有几十个菜单,项目大的令人发指,所以准备重构,使用了umi+qiankun的方式,子应用使用了vue和react两个类型的框架。

  因为用到了umi框架,默认的路由文件统一配置在config/routers下面,并且是静态的,但是因为现在是动态添加的子应用,如果使用静态的路由文件,每次新加一个子应用,就需要修改一次主应用中的路由文件再发布一次,明显感觉不合理。因此找了一个解决动态路由的方法,也是官方的解决方案。配置的方式主要是在运行时进行,官方文件见 https://umijs.org/zh-CN/docs/runtime-config

  通过以上的方式,我们就能根据后端的返回接口,动态的添加路由了,本地的路由配置文件只需要配置一些主应用常用的并且几乎不会变化的路由即可。当然不光是微应用可以使用这种方式,如果有需要的话普通的路由也可以使用这种方式进行配置,这也就省去了我们每次新加一个菜单就要更新一遍routers文件的问题。

https://blog.csdn.net/BLUE_JU/article/details/109467321

添加本地存储后

回到路由文件router.ts给需要控制视图权限的路由添加access属性默认值显示就给返回的那个变量

点击登录获取到token和用户信息,然后根据用户信息判断侧边栏是否显示


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11613501.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存