toB项目页面定制化问题？

Question

一个产品给多个甲方用，同一个功能给多个甲方定制不同的页面，代码共用一套
方案1: 菜单里面每个甲方配不同的菜单，比如甲方1环境，路径配置甲方1页面的路径，甲方2环境，配置甲方2页面路径
方案2: 页面外面包一层,用v-if判断加载不同的页面
<template>

<div v-if="甲方1">
  <甲方1页面>
</div>
<div v-if="甲方2">
  <甲方2页面>
</div>

</template>
请问哪种方式好，或者还有什么其他方法？

Answer 1

你可以配置化一下会比较好,你定义一个全局变量

var menuUserList = [
    'a':['菜单1','菜单2','菜单3'], // 甲方1
    'b':['菜单3','菜单4','菜单5']  // 甲方2
] 

a,b 可以看成一个角色,多个用户可以为同一个角色
当甲方登录的时候,经过某些判断获取到他是a角色
菜单也就可以这样写

// js 某些判断后获取到用户角色为a
// var navList  = this.getUserInfo().role // 值: menuUserList[a]
var navList = menuUserList[a]

<div v-if="navList.indexOf('菜单1')">
  <菜单1>
</div>
<div v-if="navList.indexOf('菜单2')">
  <菜单2>
</div>
<div v-if="navList.indexOf('菜单3')">
  <菜单3>
</div>

这样扩展性,可复用性,管理性都能有所提高