详细说明Vue.js项目API和路由器配置拆分实践

前端分离开发方法在前端有更高的控制权

随着前端框架技术的快速发展，Router的概念在前端项目中得到了快速普及。在没有分离的早期，没有明确的路由概念，大部分前端页面跳转都是通过后端转发的。例如，在Spring MVC项目中，页面跳转如下(红线):

前端需要一个带有链接href=/manager的超链接，以便将超链接转发到SCS/wait follower路径指定的页面。

前后分离后，前端跳页的方式变了，不再需要后端处理，数据交换的方式也变了。因此，前端需要定义Router配置文件和API配置文件。在项目的权限配置管理中，后端不需要做任何事情。可以说权限配置表可以单独取出，由前端维护。

例如，这个url字段严重依赖于后端，而没有将前端和后端分开。url是后端的接口地址。如果需要更改，后端需要修改代码来修改接口地址。现在，前端可以自由控制url的值。

在接口层面，前端也有自己的配置文件，可以对后端提供的接口进行重命名和组合。诸如

前端采用模块名接口名的方式进行管理，调用后端提供的接口并不重要，直观方便，维护方便。在页面上使用，查询也非常直观：

当您看到distribute()leads . datagrid的接口时，您会知道这是distribute模块下的Leasd函数下的列表查询接口

Vue.js中的应用编程接口和路由器配置

在Vue.js项目下，我们一开始只使用一个api.config.js配置文件，所有的接口都是在里面定义的，路由器也是这样，它是在一个router.config.js里面配置的下面是我们项目中的api配置文件

可以看到很多业务模块和接口都达到了570多行。随着业务的进一步发展，接口迅速扩展，文件越来越大。

此时，迫切需要将不同的业务模块拆分成API配置文件。同样，让我们在拆分前查看路由器配置文件：

这样，路由器One最大的缺点就是会导致路由器命名冲突。

分开！分开！分开！

首先，考虑如何拆分API配置文件。对于接口，我们必须有多组环境，所以API的URL是不同的。拆分成多个文件后，多个文件需要共享同一个方法才能获得apiBase，所以这个apiBase应该写在一个公共的地方，原来的api.config.js变成一个公共的配置，apiBase放在这个文件中。

导出函数apiBase() {让主机名=window.location.hostname，API _ BASE _ URL=' http://test 2 API . dunizb.com '；//默认环境if(主机名==' CRM . duniz b . cn '){//官方环境API _ base _ URL=' http://API . duniz b . cn '；} else if(hostname==' admin . duniz b.com '){//公共网络测试环境API _ base _ URL=' http://testapi . duniz b.com '；} else if(hostname==' manager . duniz b.com '){//intranet测试环境API _ base _ URL=' http://test2 API . duniz b.com '；}返回API _ BASE _ URL}然后将其引入到每个子API配置文件中：

从“”导入{apiBase}./API . config '；不需要更改具体的功能API，可以直接将对应的模块API复制到子模块API配置文件中。

路由器的拆分稍微复杂一点，拆分后的文件目录和API的目录一样：

分割的想法完全一样，但要确保只有一台路由器。开始：

返回router.start(App，' # App ')；虽然您将页面写入子路由器配置文件以正常工作，但是Vue.js将在控制台中报告一个错误：

此错误表示路由器已经启动，无需多次启动。因此，子路由器文件中不能存在return router.start(App，' # App ')；这样的代码。

拆分后的Router.config.js如下：

/** * 路由总文件*由冰于2017/6/19 0019创建。*/从""导入应用程序/App '；从""导入权限。/路由器/授权机构；从""导入公共。/路由器/公共；从'导入研究。/路由器/研究；导出默认功能（路由器){权威(路由器)};//基础与权限模块公众(路由器);//公共模块书房（路由器);//教学相关.返回router.start(App，' # App ')；}而子路由器配置文件的写法就是这样（以研究模块为例):

/** * 教学排课* 教研*由冰于2017/6/19 0019创建。*/从"组件/学习课程/索引/索引"导入课程索引；从"组件/学习课程/等待课程/等待课程"导入等待课程；从"组件/学习课程/已注册课程/已注册课程"导入已注册课程；从"组件/学习课程/等待课程/课程"导入课程；从"组件/教学研究/课件/课件。vue "导入课件；从"组件/教学研究/课件/库。vue "导入课程资源库；导出默认函数（路由器){路由器。map({ '/study/index ' : { component :课程索引}，'/study/wait course ' : { component : wait course }，//待排课程/学习/等待课程/档位课程' : {组件：档位课程}，//待排/学习/课程' : {组件：已有课程}，//已排课程/tr/CALES ' : { component : CALES }，//课件管理/tr/CaSe/library ' : { component : courseWareLibrarY }，//自主上传课件库});}拆分后，每个模块管理它自己领域的路由器、api、router.config.js和api.config.js就大大瘦身了，也降低了命名冲突的问题和将来混乱的问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。