xcx

src/components/siderBar/index.vue

@@ -14,7 +14,7 @@
               </template>
               <el-menu-item-group>
                 <el-menu-item v-for="(subItem,subIndex) in item.children" :key="subIndex" :index="String(index)+'-'+String(subIndex)">
-                  <router-link :to="{name:subItem.pathName,query:{}}">{{subItem.title}}</router-link>
+                  <router-link :to="{name:subItem.pathName,query:{}}" active-class="active">{{subItem.title}}</router-link>
                 </el-menu-item>
               </el-menu-item-group>
             </el-submenu>

src/components/siderBar/page.scss

@@ -6,11 +6,11 @@ a{
 }
 
 .el-menu-item.is-active{
-  background: rgba(64, 158, 255, .1);
+  background: none;
 }
 
-.el-menu-item.is-active{
-  a{
+.el-menu-item{
+  a.active{
     color: #409EFF;
   }
 }

src/pages/system/caseManger/caseInfo/index.vue → src/pages/system/caseManager/caseInfo/index.vue

@@ -55,7 +55,7 @@
             <!-- <el-button
               size="mini"
               type="success"
-              @click="keyManger(scope.$index, scope.row)">钥匙管理</el-button> -->
+              @click="keyManager(scope.$index, scope.row)">钥匙管理</el-button> -->
           </template>
         </el-table-column>
       </el-table>
@@ -142,7 +142,7 @@ export default {
       // console.log(index, row)
       this.$router.push({ name: 'editCase', query: { id: row.id } })
     },
-    keyManger (index, row) { // 钥匙管理
+    keyManager (index, row) { // 钥匙管理
       console.log(index, row)
     },
     searchList (key) { // 搜索列表

src/pages/system/index.vue

@@ -56,11 +56,11 @@ export default {
         pathName: '',
         children: [{
           title: '用户管理',
-          pathName: 'userManger',
+          pathName: 'userManager',
           children: [],
         }, {
           title: '角色管理',
-          pathName: 'roleManger',
+          pathName: 'roleManager',
           children: [],
         }],
       }, {
@@ -72,15 +72,15 @@ export default {
           children: [],
         }, {
           title: '钥匙管理',
-          pathName: 'keyManger',
+          pathName: 'keyManager',
           children: [],
         }, {
           title: '案场区域管理',
-          pathName: 'caseAreaManger',
+          pathName: 'caseAreaManager',
           children: [],
         }, {
           title: '案场桌位管理',
-          pathName: 'caseTableManger',
+          pathName: 'caseTableManager',
           children: [],
         }],
       }, {
@@ -88,11 +88,11 @@ export default {
         pathName: '',
         children: [{
           title: '商品类型管理',
-          pathName: 'goodsTypeManger',
+          pathName: 'goodsTypeManager',
           children: [],
         }, {
           title: '商品规格管理',
-          pathName: 'goodsSpecManger',
+          pathName: 'goodsSpecManager',
           children: [],
         }],
       }, {
@@ -100,7 +100,7 @@ export default {
         pathName: '',
         children: [{
           title: '轮播图管理',
-          pathName: 'bannerManger',
+          pathName: 'bannerManager',
           children: [],
         }, {
           title: '售楼处项目专题',
@@ -112,7 +112,7 @@ export default {
           children: [],
         }, {
           title: '资讯管理',
-          pathName: 'newsManger',
+          pathName: 'newsManager',
           children: [],
         }],
       }, {
@@ -149,7 +149,13 @@ export default {
   components: {
     breadCrumb,
     siderBar,
-  }
+  },
+  methods: {
+    calcMenuData () {
+      console.log()
+    }
+  },
+  mounted () { }
 }
 </script>
 

src/pages/system/page.js

@@ -2,59 +2,59 @@
 import system from './index' // 系统首页
 
 import systemSet from './systemSet/index' // 系统设置
-import userManger from './systemSet/userManger/index' // 用户管理
-import addUser from './systemSet/userManger/add' // 添加用户
-import editUser from './systemSet/userManger/edit' // 编辑用户
-import roleManger from './systemSet/roleManger/index' // 角色管理
-import addRole from './systemSet/roleManger/add' // 添加角色
-import editRole from './systemSet/roleManger/edit' // 编辑角色
+import userManager from './systemSet/userManager/index' // 用户管理
+import addUser from './systemSet/userManager/add' // 添加用户
+import editUser from './systemSet/userManager/edit' // 编辑用户
+import roleManager from './systemSet/roleManager/index' // 角色管理
+import addRole from './systemSet/roleManager/add' // 添加角色
+import editRole from './systemSet/roleManager/edit' // 编辑角色
 
-import caseManger from './caseManger/index' // 案场管理
-import caseInfo from './caseManger/caseInfo/index' // 案场信息
-import addCase from './caseManger/caseInfo/addCase/index' // 新增案场
-import editCase from './caseManger/caseInfo/editCase/index' // 新增案场
-import keyManger from './caseManger/keyManger/index' // 钥匙管理
-import caseAreaManger from './caseManger/caseAreaManger/index' // 案场区域管理
-import addCaseArea from './caseManger/caseAreaManger/add' // 新增案场区域
-import editCaseArea from './caseManger/caseAreaManger/edit' // 编辑案场区域
-import caseTableManger from './caseManger/caseTableManger/index' // 案场桌位管理
-import addCaseTable from './caseManger/caseTableManger/add' // 新增案场桌位
-import editCaseTable from './caseManger/caseTableManger/edit' // 编辑案场桌位
+import caseManager from './caseManager/index' // 案场管理
+import caseInfo from './caseManager/caseInfo/index' // 案场信息
+import addCase from './caseManager/caseInfo/addCase/index' // 新增案场
+import editCase from './caseManager/caseInfo/editCase/index' // 新增案场
+import keyManager from './caseManager/keyManager/index' // 钥匙管理
+import caseAreaManager from './caseManager/caseAreaManager/index' // 案场区域管理
+import addCaseArea from './caseManager/caseAreaManager/add' // 新增案场区域
+import editCaseArea from './caseManager/caseAreaManager/edit' // 编辑案场区域
+import caseTableManager from './caseManager/caseTableManager/index' // 案场桌位管理
+import addCaseTable from './caseManager/caseTableManager/add' // 新增案场桌位
+import editCaseTable from './caseManager/caseTableManager/edit' // 编辑案场桌位
 
-import goodsManger from './goodsManger/index' // 商品管理
-import goodsTypeManger from './goodsManger/goodsTypeManger/index' // 商品类型管理
-import addGoodsType from './goodsManger/goodsTypeManger/add' // 新增商品类型
-import editGoodsType from './goodsManger/goodsTypeManger/edit' // 编辑商品类型
-import goodsSpecManger from './goodsManger/goodsSpecManger/index' // 商品规格管理
-import addGoodsSpec from './goodsManger/goodsSpecManger/add' // 新增商品规格
-import editGoodsSpec from './goodsManger/goodsSpecManger/edit' // 编辑商品规格管理
+import goodsManager from './goodsManager/index' // 商品管理
+import goodsTypeManager from './goodsManager/goodsTypeManager/index' // 商品类型管理
+import addGoodsType from './goodsManager/goodsTypeManager/add' // 新增商品类型
+import editGoodsType from './goodsManager/goodsTypeManager/edit' // 编辑商品类型
+import goodsSpecManager from './goodsManager/goodsSpecManager/index' // 商品规格管理
+import addGoodsSpec from './goodsManager/goodsSpecManager/add' // 新增商品规格
+import editGoodsSpec from './goodsManager/goodsSpecManager/edit' // 编辑商品规格管理
 
-import cmsManger from './cmsManger/index' // cms管理
-import bannerManger from './cmsManger/bannerManger/index' // 轮播图管理
-import addBanner from './cmsManger/bannerManger/add' // 添加轮播图
-import editBanner from './cmsManger/bannerManger/edit' // 编辑轮播图
-import majorProjects from './cmsManger/majorProjects/index' // 售楼处项目专题
-import addMajorProjects from './cmsManger/majorProjects/add' // 新增售楼处项目专题
-import editMajorProjects from './cmsManger/majorProjects/edit' // 编辑售楼处项目专题
-import indexMsg from './cmsManger/indexMsg/index' // 首页消息
-import addIndexMsg from './cmsManger/indexMsg/add' // 新增首页消息
-import editIndexMsg from './cmsManger/indexMsg/edit' // 新增首页消息
-import newsManger from './cmsManger/newsManger/index' // 资讯管理
-import addNews from './cmsManger/newsManger/add' // 资讯管理
-import editNews from './cmsManger/newsManger/edit' // 资讯管理
+import cmsManager from './cmsManager/index' // cms管理
+import bannerManager from './cmsManager/bannerManager/index' // 轮播图管理
+import addBanner from './cmsManager/bannerManager/add' // 添加轮播图
+import editBanner from './cmsManager/bannerManager/edit' // 编辑轮播图
+import majorProjects from './cmsManager/majorProjects/index' // 售楼处项目专题
+import addMajorProjects from './cmsManager/majorProjects/add' // 新增售楼处项目专题
+import editMajorProjects from './cmsManager/majorProjects/edit' // 编辑售楼处项目专题
+import indexMsg from './cmsManager/indexMsg/index' // 首页消息
+import addIndexMsg from './cmsManager/indexMsg/add' // 新增首页消息
+import editIndexMsg from './cmsManager/indexMsg/edit' // 新增首页消息
+import newsManager from './cmsManager/newsManager/index' // 资讯管理
+import addNews from './cmsManager/newsManager/add' // 资讯管理
+import editNews from './cmsManager/newsManager/edit' // 资讯管理
 
-import channelManger from './channelManager/index' // 渠道管理
+import channelManager from './channelManager/index' // 渠道管理
 import channelList from './channelManager/channelList/index' // 渠道列表
 import addChannel from './channelManager/channelList/add' // 新增渠道
 import editChannel from './channelManager/channelList/edit' // 编辑渠道
 
-import courseManger from './courseManger/index' // 课程管理
-import fiveA from './courseManger/fiveA/index' // 全龄生活5A
-import addFiveA from './courseManger/fiveA/add' // 全龄生活5A添加
-import editFiveA from './courseManger/fiveA/edit' // 全龄生活5A编辑
-import courseTag from './courseManger/courseTag/index' // 课程标签
-import addCourseTag from './courseManger/courseTag/add' // 新增课程标签
-import editCourseTag from './courseManger/courseTag/edit' // 编辑课程标签
+import courseManager from './courseManager/index' // 课程管理
+import fiveA from './courseManager/fiveA/index' // 全龄生活5A
+import addFiveA from './courseManager/fiveA/add' // 全龄生活5A添加
+import editFiveA from './courseManager/fiveA/edit' // 全龄生活5A编辑
+import courseTag from './courseManager/courseTag/index' // 课程标签
+import addCourseTag from './courseManager/courseTag/add' // 新增课程标签
+import editCourseTag from './courseManager/courseTag/edit' // 编辑课程标签
 
 import dataStatistics from './dataStatistics/index' // 数据统计
 import frontEndUserList from './dataStatistics/frontEndUserList/index' // 课程管理
@@ -70,245 +70,245 @@ export default {
         name: 'systemSet',
         component: systemSet,
         children: [{ // 用户管理
-          path: 'userManger',
-          name: 'userManger',
-          component: userManger,
-          children: []
-        }, { // 添加用户
-          path: 'userManger/addUser',
-          name: 'addUser',
-          component: addUser,
-          children: []
-        }, { // 编辑用户
-          path: 'userManger/editUser',
-          name: 'editUser',
-          component: editUser,
-          children: []
+          path: 'userManager',
+          name: 'userManager',
+          component: userManager,
+          children: [{ // 添加用户
+            path: 'addUser',
+            name: 'addUser',
+            component: addUser,
+            children: []
+          }, { // 编辑用户
+            path: 'editUser',
+            name: 'editUser',
+            component: editUser,
+            children: []
+          }]
         }, { // 角色管理
-          path: 'roleManger',
-          name: 'roleManger',
-          component: roleManger,
-          children: []
-        }, { // 添加角色
-          path: 'roleManger/addRole',
-          name: 'addRole',
-          component: addRole,
-          children: []
-        }, { // 编辑角色
-          path: 'roleManger/editRole',
-          name: 'editRole',
-          component: editRole,
-          children: []
+          path: 'roleManager',
+          name: 'roleManager',
+          component: roleManager,
+          children: [{ // 添加角色
+            path: 'addRole',
+            name: 'addRole',
+            component: addRole,
+            children: []
+          }, { // 编辑角色
+            path: 'editRole',
+            name: 'editRole',
+            component: editRole,
+            children: []
+          }]
         }],
       }, { // 案场管理
-        path: 'caseManger',
-        name: 'caseManger',
-        component: caseManger,
+        path: 'caseManager',
+        name: 'caseManager',
+        component: caseManager,
         children: [{ // 案场信息
           path: 'caseInfo',
           name: 'caseInfo',
           component: caseInfo,
-          children: []
-        }, { // 新增案场
-          path: 'caseInfo/addCase',
-          name: 'addCase',
-          component: addCase,
-          children: []
-        }, { // 编辑案场
-          path: 'caseInfo/editCase',
-          name: 'editCase',
-          component: editCase,
-          children: []
+          children: [{ // 新增案场
+            path: 'addCase',
+            name: 'addCase',
+            component: addCase,
+            children: []
+          }, { // 编辑案场
+            path: 'editCase',
+            name: 'editCase',
+            component: editCase,
+            children: []
+          }]
         }, { // 钥匙管理
-          path: 'keyManger',
-          name: 'keyManger',
-          component: keyManger,
+          path: 'keyManager',
+          name: 'keyManager',
+          component: keyManager,
           children: []
         }, { // 案场区域管理
-          path: 'caseAreaManger',
-          name: 'caseAreaManger',
-          component: caseAreaManger,
-          children: []
-        }, { // 新增案场区域
-          path: 'caseAreaManger/addCaseArea',
-          name: 'addCaseArea',
-          component: addCaseArea,
-          children: []
-        }, { // 编辑案场区域
-          path: 'caseAreaManger/editCaseArea',
-          name: 'editCaseArea',
-          component: editCaseArea,
-          children: []
+          path: 'caseAreaManager',
+          name: 'caseAreaManager',
+          component: caseAreaManager,
+          children: [{ // 新增案场区域
+            path: 'addCaseArea',
+            name: 'addCaseArea',
+            component: addCaseArea,
+            children: []
+          }, { // 编辑案场区域
+            path: 'editCaseArea',
+            name: 'editCaseArea',
+            component: editCaseArea,
+            children: []
+          }]
         }, { // 案场桌位管理
-          path: 'caseTableManger',
-          name: 'caseTableManger',
-          component: caseTableManger,
-          children: []
-        }, { // 新增案场桌位
-          path: 'caseTableManger/addCaseTable',
-          name: 'addCaseTable',
-          component: addCaseTable,
-          children: []
-        }, { // 编辑案场桌位
-          path: 'caseTableManger/editCaseTable',
-          name: 'editCaseTable',
-          component: editCaseTable,
-          children: []
+          path: 'caseTableManager',
+          name: 'caseTableManager',
+          component: caseTableManager,
+          children: [{ // 新增案场桌位
+            path: 'addCaseTable',
+            name: 'addCaseTable',
+            component: addCaseTable,
+            children: []
+          }, { // 编辑案场桌位
+            path: 'editCaseTable',
+            name: 'editCaseTable',
+            component: editCaseTable,
+            children: []
+          }]
         }],
       }, { // 商品管理
-        path: 'goodsManger',
-        name: 'goodsManger',
-        component: goodsManger,
+        path: 'goodsManager',
+        name: 'goodsManager',
+        component: goodsManager,
         children: [{ // 商品类型管理
-          path: 'goodsTypeManger',
-          name: 'goodsTypeManger',
-          component: goodsTypeManger,
-          children: []
-        }, { // 新增商品类型
-          path: 'goodsTypeManger/addGoodsType',
-          name: 'addGoodsType',
-          component: addGoodsType,
-          children: []
-        }, { // 编辑商品类型
-          path: 'goodsTypeManger/editGoodsType',
-          name: 'editGoodsType',
-          component: editGoodsType,
-          children: []
+          path: 'goodsTypeManager',
+          name: 'goodsTypeManager',
+          component: goodsTypeManager,
+          children: [{ // 新增商品类型
+            path: 'addGoodsType',
+            name: 'addGoodsType',
+            component: addGoodsType,
+            children: []
+          }, { // 编辑商品类型
+            path: 'editGoodsType',
+            name: 'editGoodsType',
+            component: editGoodsType,
+            children: []
+          }]
         }, { // 商品规格管理
-          path: 'goodsSpecManger',
-          name: 'goodsSpecManger',
-          component: goodsSpecManger,
-          children: []
-        }, { // 新增商品规格
-          path: 'goodsSpecManger/addGoodsSpec',
-          name: 'addGoodsSpec',
-          component: addGoodsSpec,
-          children: []
-        }, { // 编辑商品规格
-          path: 'goodsSpecManger/editGoodsSpec',
-          name: 'editGoodsSpec',
-          component: editGoodsSpec,
-          children: []
+          path: 'goodsSpecManager',
+          name: 'goodsSpecManager',
+          component: goodsSpecManager,
+          children: [{ // 新增商品规格
+            path: 'addGoodsSpec',
+            name: 'addGoodsSpec',
+            component: addGoodsSpec,
+            children: []
+          }, { // 编辑商品规格
+            path: 'editGoodsSpec',
+            name: 'editGoodsSpec',
+            component: editGoodsSpec,
+            children: []
+          }]
         }],
       }, { // cms管理
-        path: 'cmsManger',
-        name: 'cmsManger',
-        component: cmsManger,
+        path: 'cmsManager',
+        name: 'cmsManager',
+        component: cmsManager,
         children: [{ // 轮播图管理
-          path: 'bannerManger',
-          name: 'bannerManger',
-          component: bannerManger,
-          children: []
-        }, { // 新增轮播图
-          path: 'bannerManger/addBanner',
-          name: 'addBanner',
-          component: addBanner,
-          children: []
-        }, { // 编辑轮播图
-          path: 'bannerManger/editBanner',
-          name: 'editBanner',
-          component: editBanner,
-          children: []
+          path: 'bannerManager',
+          name: 'bannerManager',
+          component: bannerManager,
+          children: [{ // 新增轮播图
+            path: 'addBanner',
+            name: 'addBanner',
+            component: addBanner,
+            children: []
+          }, { // 编辑轮播图
+            path: 'editBanner',
+            name: 'editBanner',
+            component: editBanner,
+            children: []
+          }]
         }, { // 售楼处项目专题
           path: 'majorProjects',
           name: 'majorProjects',
           component: majorProjects,
-          children: []
-        }, { // 新增售楼处项目专题
-          path: 'majorProjects/addMajorProjects',
-          name: 'addMajorProjects',
-          component: addMajorProjects,
-          children: []
-        }, { // 编辑售楼处项目专题
-          path: 'majorProjects/editMajorProjects',
-          name: 'editMajorProjects',
-          component: editMajorProjects,
-          children: []
+          children: [{ // 新增售楼处项目专题
+            path: 'addMajorProjects',
+            name: 'addMajorProjects',
+            component: addMajorProjects,
+            children: []
+          }, { // 编辑售楼处项目专题
+            path: 'editMajorProjects',
+            name: 'editMajorProjects',
+            component: editMajorProjects,
+            children: []
+          }]
         }, { // 首页消息
           path: 'indexMsg',
           name: 'indexMsg',
           component: indexMsg,
-          children: []
-        }, { // 新增首页消息
-          path: 'indexMsg/addIndexMsg',
-          name: 'addIndexMsg',
-          component: addIndexMsg,
-          children: []
-        }, { // 编辑首页消息
-          path: 'indexMsg/editIndexMsg',
-          name: 'editIndexMsg',
-          component: editIndexMsg,
-          children: []
+          children: [{ // 新增首页消息
+            path: 'addIndexMsg',
+            name: 'addIndexMsg',
+            component: addIndexMsg,
+            children: []
+          }, { // 编辑首页消息
+            path: 'editIndexMsg',
+            name: 'editIndexMsg',
+            component: editIndexMsg,
+            children: []
+          }]
         }, { // 资讯管理
-          path: 'newsManger',
-          name: 'newsManger',
-          component: newsManger,
-          children: []
-        }, { // 新增资讯
-          path: 'newsManger/addNews',
-          name: 'addNews',
-          component: addNews,
-          children: []
-        }, { // 编辑资讯
-          path: 'newsManger/editNews',
-          name: 'editNews',
-          component: editNews,
-          children: []
+          path: 'newsManager',
+          name: 'newsManager',
+          component: newsManager,
+          children: [{ // 新增资讯
+            path: 'addNews',
+            name: 'addNews',
+            component: addNews,
+            children: []
+          }, { // 编辑资讯
+            path: 'editNews',
+            name: 'editNews',
+            component: editNews,
+            children: []
+          }]
         }],
       }, { // 渠道管理
-        path: 'channelManger',
-        name: 'channelManger',
-        component: channelManger,
+        path: 'channelManager',
+        name: 'channelManager',
+        component: channelManager,
         children: [{ // 渠道列表
           path: 'channelList',
           name: 'channelList',
           component: channelList,
-          children: []
-        }, { // 新增渠道
-          path: 'channelList/addChannel',
-          name: 'addChannel',
-          component: addChannel,
-          children: []
-        }, { // 编辑渠道
-          path: 'channelList/editChannel',
-          name: 'editChannel',
-          component: editChannel,
-          children: []
+          children: [{ // 新增渠道
+            path: 'addChannel',
+            name: 'addChannel',
+            component: addChannel,
+            children: []
+          }, { // 编辑渠道
+            path: 'editChannel',
+            name: 'editChannel',
+            component: editChannel,
+            children: []
+          }]
         }],
       }, { // 课程管理
-        path: 'courseManger',
-        name: 'courseManger',
-        component: courseManger,
+        path: 'courseManager',
+        name: 'courseManager',
+        component: courseManager,
         children: [{ // 全龄生活5A
           path: 'fiveA',
           name: 'fiveA',
           component: fiveA,
-          children: []
-        }, { // 全龄生活5A添加
-          path: 'fiveA/addFiveA',
-          name: 'addFiveA',
-          component: addFiveA,
-          children: []
-        }, { // 全龄生活5A编辑
-          path: 'fiveA/editFiveA',
-          name: 'editFiveA',
-          component: editFiveA,
-          children: []
+          children: [{ // 全龄生活5A添加
+            path: 'addFiveA',
+            name: 'addFiveA',
+            component: addFiveA,
+            children: []
+          }, { // 全龄生活5A编辑
+            path: 'editFiveA',
+            name: 'editFiveA',
+            component: editFiveA,
+            children: []
+          }]
         }, { // 课程标签
           path: 'courseTag',
           name: 'courseTag',
           component: courseTag,
-          children: []
-        }, { // 新增课程标签
-          path: 'courseTag/addCourseTag',
-          name: 'addCourseTag',
-          component: addCourseTag,
-          children: []
-        }, { // 编辑课程标签
-          path: 'courseTag/editCourseTag',
-          name: 'editCourseTag',
-          component: editCourseTag,
-          children: []
+          children: [{ // 新增课程标签
+            path: 'addCourseTag',
+            name: 'addCourseTag',
+            component: addCourseTag,
+            children: []
+          }, { // 编辑课程标签
+            path: 'editCourseTag',
+            name: 'editCourseTag',
+            component: editCourseTag,
+            children: []
+          }]
         }],
       }, { // 数据统计
         path: 'dataStatistics',

src/pages/test/test.vue

@@ -1,31 +0,0 @@
-<style lang="sass" scoped>
-
-</style>
-
-<template>
-  <div>123</div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-
-    }
-  },
-  mounted () {
-    console.log(this)
-    this.$ajax(this.$api.test.area.url, {
-      method: 'GET',
-      data: {
-        caseid: 1
-      }
-    })
-      .then(res => {
-        console.log(res)
-      }).catch(msg => {
-        return false
-      })
-  }
-}
-</script>

src/router/index.js

@@ -1,24 +1,45 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import login from '@/pages/login/index'
-import system from '@/pages/system/page'
-import test from '@/pages/test/test'
+import routerData from './router'
+import store from './../store/index'
 
 Vue.use(Router)
 
-export default new Router({
-  routes: [
-    {
-      path: '/',
-      name: 'login',
-      component: login
-    },
-    { path: '/', redirect: '/index' },
-    ...system.router,
-    {
-      path: '/test',
-      name: 'test',
-      component: test
+const flatten = (parent, data) => {
+  console.log(parent)
+  return data.reduce((acc, { path, name, component, title, children }) => {
+    const pth = [parent, path].join('/').replace('//', '/')
+    const item = { path: pth, name, component, title, children: [] }
+
+    if (children && children.length) {
+      return acc.concat(item, flatten(pth, children))
     }
-  ]
+
+    return acc.concat(item)
+  }, [])
+}
+
+// route 数据, 展平二级路由
+const routes = routerData.reduce((acc, r) => {
+  const { children, ...rest } = r
+
+  if (children && children.length) {
+    return acc.concat({ ...rest, children: flatten([], children) })
+  }
+
+  return acc.concat(r)
+}, [])
+
+// console.log(routes)
+
+const router = new Router({
+  routes,
+  linkActiveClass: 'active',
 })
+
+router.beforeEach((to, from, next) => {
+  store.commit('updateBread', { routerData, name: to.name })
+  next()
+})
+
+export default router

src/router/router.js

@@ -0,0 +1,13 @@
+import login from '@/pages/login/index'
+import system from '@/pages/system/page'
+
+const routerArr = [
+  {
+    path: '/',
+    name: 'login',
+    component: login
+  },
+  ...system.router,
+]
+
+export default routerArr

src/store/app.js

@@ -0,0 +1,62 @@
+
+function flatten (parent, data = [], menusRaw = []) {
+  console.log(parent)
+  return data.reduce((acc, { name, children }) => {
+    const menu = menusRaw.filter(x => x.Url === name)[0]
+    if (!menu) return acc
+
+    const title = menu.MenuName
+    const item = { name, title, parent }
+
+    if (children && children.length) {
+      const p = parent.concat({ name, title })
+      return acc.concat(item, flatten(p, children, menusRaw))
+    }
+
+    return acc.concat(item)
+  }, [])
+}
+
+export default {
+  state: {
+    menusRaw: [{
+      MenuId: '1',
+      MenuName: '菜单1',
+      Icon: 'menu1',
+      FatherID: '-1',
+      Url: 'system',
+      IsShow: 1
+    }, {
+      MenuId: '2',
+      MenuName: '菜单1-1',
+      Icon: 'menu2',
+      FatherID: '1',
+      Url: 'systemSet',
+      IsShow: 1
+    }, {
+      MenuId: '3',
+      MenuName: '菜单1-1-1',
+      Icon: '',
+      FatherID: '2',
+      Url: 'userManager',
+      IsShow: 1
+    }],
+    menus: [],
+    breadcrumb: [],
+  },
+  mutations: {
+    updateBread (state, { routerData, name }) {
+      // 扁平 routerData
+      // 同时构造出 含有 title 的 parent 数据
+      const routeList = flatten([], routerData, state.menusRaw)
+
+      // 过滤出与 name 相同的 route 节点
+      const currentRoute = routeList.filter(x => x.name === name)[0]
+
+      // console.log(currentRoute, routeList, routerData, state.menusRaw)
+
+      // 获取 面包屑
+      state.breadcrumb = currentRoute.parent
+    }
+  }
+}

src/store/index.js

@@ -10,6 +10,7 @@ const store = new Vuex.Store({
 })
 
 export const modules = {
+  app: () => require('./app').default,
   case: () => require('./case').default,
   user: () => require('./user').default,
 }