如何从 vue-element-admin 迁移到 Fantastic-admin (2)

vue-element-admin 的 ./src/utils/request.js 对应了 Fantastic-admin 的 ./src/api/index.js 文件,它们都对 axios 进行了封装,便于统一处理 POST 和 GET 请求,你可以根据原有的配置逐行迁移代码。

另外在 vue-element-admin 的 ./src/api/ 目录下存放了以模块为维度拆分的独立文件,方便统一管理不同模块的所有接口请求,这在大型项目中是很有必要的,而 Fantastic-admin 并未提供特定目录,如果你有这个需求,可以自行建立一个文件夹用来管理这部分文件。

路由

Fantastic-admin 借鉴了 vue-element-admin 通过路由生成导航栏的思路,都是在路由里增加导航配置参数,只不过 Fantastic-admin 将额外的导航配置参数统一都放在的 meta 对象中。下面这个对比表格能帮助里快速了解 vue-element-admin 和 Fantastic-admin 对应的配置项。

vue-element-admin Fantastic-admin 说明
hidden   meta.sidebar   是否在导航栏里显示  
alwaysShow   /   并未提供该设置,因为在 Fantastic-admin 里自动处理的  
meta.roles   meta.auth   Fantastic-admin 可兼容 vue-element-admin 的权限设计模式,并提供了更高级的权限模式  
meta.title   meta.title   导航标题  
meta.icon   meta.icon   导航图标  
meta.noCache   meta.cache   vue-element-admin 的 noCache 与 Fantastic-admin 的 cache 都是对页面缓存的配置,但背后的逻辑和使用方式却完全不一样  
meta.breadcrumb   meta.breadcrumb   是否在面包屑导航里显示  
meta.affix   /   标签页是否固定,在 Fantastic-admin 中,标签页是可以通过右键标签页手动设置固定,而非在路由配置里固定写死  
meta.activeMenu   meta.activeMenu   高亮指定导航  

除了以上 vue-element-admin 提供的配置项之外,Fantastic-admin 还提供了很多额外的配置项,详细可阅读《》。

页面缓存

在 Fantastic-admin 里你可以理解只有二级路由缓存,因为我们提供了一个特性,不管路由配置多少层级,最终都会被处理成二级,但是可以放心,仅仅是路由被处理成二级,而导航和面包屑导航依旧是保持原有的层级结构展示。

这么做的目的也是为了彻底解决多级路由缓存的问题,相信你一定在 vue-element-admin 里遇到过这类问题,社区里的解决方案也五花八门,始终没有一个统一的解决方案。

所以 Fantastic-admin 提供了一个一劳永逸的解决办法,详细可阅读《页面缓存》。

最后

本篇迁移文档仅对整体做简单说明,迁移项目毕竟是个庞大工程,过程中难免会出现各种无法预测的问题,建议可以加讨论群自由讨论寻求帮助。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zypysx.html