Vue.js項(xiàng)目API、Router配置拆分的示例分析

這篇文章主要介紹Vue.js項(xiàng)目API、Router配置拆分的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

前后端分離開(kāi)發(fā)方式前端擁有更高的控制權(quán)

隨著前端框架技術(shù)的飛速發(fā)展，Router這個(gè)概念也被迅速普及到前端項(xiàng)目中，在早期前后的沒(méi)有分離的時(shí)期下，并沒(méi)有明確的路由概念，前端頁(yè)面跳轉(zhuǎn)大多是通過(guò)后端進(jìn)行請(qǐng)求轉(zhuǎn)發(fā)的，比如在Spring MVC項(xiàng)目中，進(jìn)行一個(gè)頁(yè)面跳轉(zhuǎn)如下（畫(huà)紅線(xiàn)部分）：

前端需要一個(gè)超鏈接，鏈接的href=/manager，這樣這個(gè)超鏈接被轉(zhuǎn)發(fā)到scs/waitFollowed路徑指定的頁(yè)面。

前后的分離后，前端頁(yè)面跳轉(zhuǎn)的方式發(fā)生了變化，不再需要后端處理了，數(shù)據(jù)交換方式也改變了，由此前端需要定義Router配置文件，需要定義API配置文件。在項(xiàng)目的權(quán)限配置管理中，完全不需要后端什么事了，可以說(shuō)，權(quán)限配置表可以單獨(dú)拿出來(lái)由前端維護(hù)了。

比如這個(gè)url字段，在前后端不分離的情況下，嚴(yán)重依賴(lài)于后端，url就是后端接口地址，如果需要更改就需要后端修改代碼修改接口地址，而現(xiàn)在，前端可以自由控制url的值是什么了。

在接口層面，前端也會(huì)有自己的配置文件，可以對(duì)后端提供的接口進(jìn)行重命名，組合等。比如

前端都統(tǒng)一使用模塊名+接口名的方式管理，管后端提供的接口叫啥已經(jīng)不重要，在視覺(jué)上和維護(hù)上都比較方便。在頁(yè)面上使用，查詢(xún)起來(lái)也很直觀(guān)：

看到DISTRBUTE().Leads.dataGrid這個(gè)接口，就知道這是DISTRBUTE模塊下Leasd功能下的列表查詢(xún)接口

Vue.js中的API、Router配置

在Vue.js項(xiàng)目下，一開(kāi)始我們只使用一個(gè)api.config.js配置文件，所有的接口都定義在這里面，router也一樣，都配置在一個(gè)router.config.js中，下面是我們項(xiàng)目中API配置文件

可以看到，很多的業(yè)務(wù)模塊，很多的接口，已經(jīng)達(dá)到了570多行，隨著業(yè)務(wù)進(jìn)一步推進(jìn)，接口快速膨脹，文件越來(lái)越大。

這時(shí)候迫切需要拆分，把不同的業(yè)務(wù)模塊單獨(dú)拆分為一個(gè)個(gè)API配置文件。同樣，我們來(lái)看看拆分前的Router配置文件：

這樣router一多最大的缺點(diǎn)就是會(huì)導(dǎo)致router命名沖突。

拆分！拆分！拆分！

首先考慮API配置文件怎么拆分，對(duì)于接口，我們肯定有多套環(huán)境，多套環(huán)境那么API的URL也不一樣，拆分成多個(gè)文件后多個(gè)文件需要共用同一個(gè)獲取apiBase的方法，所以這個(gè)apiBase就要寫(xiě)在公共的地方，在這里原來(lái)的api.config.js就變成了公共配置，apiBase就放在此文件內(nèi)。

export function apiBase() {
 let hostname = window.location.hostname,
  API_BASE_URL = 'http://test2api.dunizb.com';//默認(rèn)環(huán)境
 if(hostname === 'crm.dunizb.cn') { //正式環(huán)境
  API_BASE_URL = 'http://api.dunizb.cn';
 } else if(hostname === 'admin.dunizb.com') {//公網(wǎng)測(cè)試環(huán)境
  API_BASE_URL = 'http://testapi.dunizb.com';
 } else if(hostname === 'manager.dunizb.com') {//內(nèi)網(wǎng)測(cè)試環(huán)境
  API_BASE_URL = 'http://test2api.dunizb.com';
 }
 return API_BASE_URL;
}

然后在每個(gè)子API配置文件中引入即可：

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

具體功能API不需要更改，直接拷貝相應(yīng)模塊API到子模塊API配置文件即可。

Router的拆分稍微復(fù)雜一點(diǎn)，拆分后的文件目錄與API的目錄相同：

拆分思路也完全一樣，但要保證只有一個(gè)router.start即：

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

雖然你在子router配置文件中也寫(xiě)上頁(yè)面是能正常工作的，但是Vue.js會(huì)在控制臺(tái)報(bào)一個(gè)錯(cuò)誤：

這個(gè)錯(cuò)誤的意思就是router已經(jīng)啟動(dòng)，無(wú)需啟動(dòng)多次。所以，子router文件中不能存在 return router.start(App, '#app'); 這樣的代碼。

拆分后router.config.js內(nèi)容如下：

/**
 * 路由總文件
 * 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);//基礎(chǔ)與權(quán)限模塊
 publics(router);//公共模塊
 study(router);//教學(xué)相關(guān)
 ... ...
 return router.start(App, '#app');
}

而子router配置文件的寫(xiě)法就是這樣（以study模塊為例）：

/**
 * 教學(xué)排課
 * 教研
 * 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},//自主上傳課件庫(kù)
 });
}

以上是“Vue.js項(xiàng)目API、Router配置拆分的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！