vue项目根据配置控制路由

一、需求背景

在当前项目（叫Parent项目，简称P项目）中抽离一个精简版项目（Child项目，简称C项目），用作其他用途。隐藏P项目的所有logo和名称，增加部分页面如登录页面等。

二、实现思路

1.拷贝一份P项目通过删减和增加特定页面来生成一个全新的项目，在新的项目上进行维护。

    优点：项目独立不会冗余过多的权限控制和兼容代码

    缺点：相同需求变更需要维护两套代码，增加工作量

2.根据一个配置开判断项目类型是P还是C，根据权限来控制路由，实现一套代码维护两套逻辑。

   优缺点和第一种方法正好相反

总结：权衡业务需求发现，C项目不同的模块只有登录注册，其他功能都是和P项目完全相等或者是P项目的阉割版，为了维护更加方便决定在P项目上根据权限进行区分。

三、路由实现

1、根据权限加载路由

之前这里是两大坨路由配置，给拆分成两个文件，对应两个平台去维护。

import PRoute from './P.js' 
import CRoute from './C.js'; 

const isC= store.state.app.isC; // 是否是C项目
if (isC) {
  // P平台
  router = new Router({routes: CRoute});
} else {
  // C平台
  router = new Router({routes: PRoute});
}

说明：这里从vuex里获取的权限控制是根据域名判断的，所以进入页面就使用 isC 去判断是可以的。

const state = {
  isTripartite: location.host.indexOf('C') > -1 
}

如果配置是根据接口来获取这里会有问题，因为加载路由时参数还没有获取到。这个项目相对比较固定，所以使用域名去判断，对于项目需要多次私有化部署的需求，则需要把路由加载放在获取平台配置的成功回调中去做。

四、P项目信息隐藏

还是从vuex获取当前平台信息

data () {
    return {
      isC: this.$store.state.app.isC
    }
  },

在页面上根据isC字段判断来操作。

五、总结

P项目和C项目都是同一套代码，根据域名去加载不通的路由和一些业务判断。