Vue.js项目API、Router配置拆分实践

先后端分离开发方式前端拥有更高的控制权

随着前端框架技术的飞速发展，Router这个概念也被迅速普及到前端项目中，在早期先后的没有分离的时期下，并无明确的路由概念，前端页面跳转大可能是经过后端进行请求转发的，好比在Spring MVC项目中，进行一个页面跳转以下（画红线部分）：

前端须要一个超连接，连接的href=/manager，这样这个超连接被转发到scs/waitFollowed路径指定的页面。

先后的分离后，前端页面跳转的方式发生了变化，再也不须要后端处理了，数据交换方式也改变了，由此前端须要定义Router配置文件，须要定义API配置文件。在项目的权限配置管理中，彻底不须要后端什么事了，能够说，权限配置表能够单独拿出来由前端维护了。

好比这个url字段，在先后端不分离的状况下，严重依赖于后端，url就是后端接口地址，若是须要更改就须要后端修改代码修改接口地址，而如今，前端能够自由控制url的值是什么了。

在接口层面，前端也会有本身的配置文件，能够对后端提供的接口进行重命名，组合等。好比

前端都统一使用模块名+接口名的方式管理，管后端提供的接口叫啥已经不重要，在视觉上和维护上都比较方便。在页面上使用，查询起来也很直观：

看到DISTRBUTE().Leads.dataGrid这个接口，就知道这是DISTRBUTE模块下Leasd功能下的列表查询接口

Vue.js中的API、Router配置

在Vue.js项目下，一开始咱们只使用一个api.config.js配置文件，全部的接口都定义在这里面，router也同样，都配置在一个router.config.js中，下面是咱们项目中API配置文件

能够看到，不少的业务模块，不少的接口，已经达到了570多行，随着业务进一步推动，接口快速膨胀，文件愈来愈大。

这时候迫切须要拆分，把不一样的业务模块单独拆分为一个个API配置文件。一样，咱们来看看拆分前的Router配置文件：

这样router一多最大的缺点就是会致使router命名冲突。

拆分！拆分！拆分！

首先考虑API配置文件怎么拆分，对于接口，咱们确定有多套环境，多套环境那么API的URL也不同，拆分红多个文件后多个文件须要共用同一个获取apiBase的方法，因此这个apiBase就要写在公共的地方，在这里原来的api.config.js就变成了公共配置，apiBase就放在此文件内。

export function apiBase() {
  let hostname = window.location.hostname,
    API_BASE_URL = 'http://test2api.dunizb.com';//默认环境
  if(hostname === 'crm.dunizb.cn') {  //正式环境
    API_BASE_URL = 'http://api.dunizb.cn';
  } else if(hostname === 'admin.dunizb.com') {//公网测试环境
    API_BASE_URL = 'http://testapi.dunizb.com';
  } else if(hostname === 'manager.dunizb.com') {//内网测试环境
    API_BASE_URL = 'http://test2api.dunizb.com';
  }
  return API_BASE_URL;
}

而后在每一个子API配置文件中引入便可：

import {apiBase} from '../api.config';

具体功能API不须要更改，直接拷贝相应模块API到子模块API配置文件便可。

Router的拆分稍微复杂一点，拆分后的文件目录与API的目录相同：

拆分思路也彻底同样，但要保证只有一个router.start即：

return router.start(App, '#app');

虽然你在子router配置文件中也写上页面是能正常工做的，可是Vue.js会在控制台报一个错误：

这个错误的意思就是router已经启动，无需启动屡次。因此，子router文件中不能存在 return router.start(App, '#app'); 这样的代码。

拆分后router.config.js内容以下：

/**
 * 路由总文件
 * Created by Bing on 2017/6/19 0019.
 */
import App from './App';
import authority from './routers/authority';
import publics from './routers/public';
import study from './routers/study';
... ...
export default function(router){
  authority(router);//基础与权限模块
  publics(router);//公共模块
  study(router);//教学相关
  ... ...
  return router.start(App, '#app');
}

而子router配置文件的写法就是这样（以study模块为例）：

/**
 * 教学排课
 * 教研
 * Created by Bing on 2017/6/19 0019.
 */
import courseIndex from 'components/studyCourse/index/index';
import waitCourse from 'components/studyCourse/waitCourse/waitCourse';
import alreadyCourse from 'components/studyCourse/alreadyCourse/alreadyCourse';
import gearCourse from 'components/studyCourse/waitCourse/gearCourse';
import courseWare from 'components/teachingResearch/courseware/courseware.vue';
import courseWareLibrary from 'components/teachingResearch/courseware/library.vue';
export default function(router) {
  router.map({
    '/study/index': {component: courseIndex},
    '/study/waitCourse': {component: waitCourse},//待排课程
    '/study/waitCourse/gearCourse': {component: gearCourse},//待排
    '/study/course': {component: alreadyCourse},//已排课程
    '/tr/courseware': {component: courseWare},//课件管理
    '/tr/courseWare/library': {component: courseWareLibrary},//自主上传课件库
  });
}

拆分后，每一个模块管理它本身领域的router、api，router.config.js和api.config.js就大大瘦身了，也下降了命名冲突的问题和未来混乱的问题。

---

此前的Vue.js系列文章：

• Vue.js开发常见问题解析

• Vue.js经常使用开发知识简要入门（一）

• Vue.js经常使用开发知识简要入门（二）

• Vue.js经常使用开发知识简要入门（三）

文章首发于个人微信公众号，关注可得到每次最新推送