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

.           
├── router       
│    ├── authority.js    // 基础与权限模块文件
│    ├── publics.js      // 公共模块文件                  
│    ├── user.js         // 用户模块文件
│    ├── agent.js        // 代理模块文件        
│    └── router.js       // 主路由文件            
.

/**
 * 路由总文件
 * User: hjm100
 * Date: 18-05-16 16:55 
 */
import App from './App';
import authority from './authority';
import publics   from './publics';
import user from './user';
import agent from './agent';
... ...

export default Object.assign(
  authority,   // 基础与权限模块
  publics,     // 公共模块
  user,        // 用户模块
  agent        // 代理模块
);

/**
 * 公共模块文件
 * User: hjm100
 * Date: 18-05-16 16:55 
 */
import Wechat from "../page/payment/Wechat.vue";
import payment from "../page/payment/payment.vue";
import paymentResult from "../page/payment/result.vue"; //支付完成后的回调页面
import paymentCheck from "../page/payment/check.vue"; //支付结果(联动优势微信公众号支付)

const PUBLICS_ROUTER = [
    { path: '/payment',component: payment,meta: { title: "支付" }, name: "paymentResult" },
    { path: '/payment/result', component: paymentResult, meta: { title: "支付返回" }, name: "payment" },
    { path: '/payment/check',component: paymentCheck, meta: { title: "支付结果" }, name: "paymentCheck" },
    { path: '/wechat',component: Wechat, meta: { title: "等待请求结果" }, name: "Wechat" },
]

export default PUBLICS_ROUTER;

/**
 * main.js文件
 * User: hjm100
 * Date: 18-05-16 16:55 
 */
import Vue from "vue";
import VueRouter from "vue-router";
import routes from "./router/router";
//定义路由函数
Vue.use(VueRouter);
const router = new VueRouter({
  mode: "history",
  routes
});
//创建每一页的title
router.beforeEach((to, from, next) => {
  window.document.title = to.meta.title;
  next();
});

export default new Vue({
  router
}).$mount("#app");

/**
 * 路由总文件
 * User: hjm100
 * Date: 18-05-16 16:55 
 */
import App from './App';
import authority from './authority';
import publics   from './publics';
import user from './user';
import agent from './agent';
... ...
export default function(router){
  authority(router);  // 基础与权限模块
  publics(router);    // 公共模块
  user(router);       // 用户模块
  agent(router);      // 代理模块
  ... ...
  return router.start(App, '#app');
  // 拆分路由的时候我们要保证只有一个router.start
  // 因为虽然你在子router配置文件中也写上页面是能正常工作的，但是Vue.js会在控制台报一个错误：
  // [vue-router] already started
  // 这个错误的意思就是router已经启动，无需启动多次。
  // 所以，子router文件中不能存在 return router.start(App, '#app'); 这样的代码。
}

/**
 * 代理模块文件
 * User: hjm100
 * Date: 18-05-16 16:55 
 */
import Agent from "../page/agent/Agent.vue";
import AgentMain from "../page/agent/AgentMain.vue";
import AgentList from "../page/agent/agentlist/AgentList.vue";
import AgentDetail from "../page/agent/agentlist/AgentDetail.vue";

export default function (router) {
  router.map({
    '/agent': { component: Agent },
    '/agent/main': { component: AgentMain, meta: { title: "代理数据" }, name: "AgentMain" },//代理数据
    '/agent/list': { component: AgentList, meta: { title: "代理列表" }, name: "AgentList" },//代理列表
    '/agent/detail': { component: AgentDetail, meta: { title: "代理详情" }, name: "AgentDetail" },//代理详情
  });
}

/**
 * api.config.js api配置文件
 * User: hjm100
 * Date: 18-05-16 16:55 
 */
export function apiBase() {
  let hostname = window.location.hostname,
    API_BASE_URL = 'http://192.168.1.237';//本地测试
  if(hostname === 'hjm100.cn') {  //正式环境
    API_BASE_URL = 'http://hjmapi.cn';
  } else if(hostname === 'hjmtest.cn') {//公网测试环境
    API_BASE_URL = 'http://hjmtestapi.cn';
  } else if(hostname === 'hjmdev.cn') {//内网测试环境
    API_BASE_URL = 'http://hjmdevapi.cn';
  }
  return API_BASE_URL;
}
//然后在每个子API配置文件中引入即可：

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