Vue/vuex/vue-router/element-ui 一个后台管理系统实现侧边栏和可配置tab标签栏的demo

自制一个简单demo，实现一个包含侧边栏、tab标签栏的后台管理系统的大致框架，在此做一下总结。

先上图

项目地址

https://github.com/ekko-wang/vue-elementui-demo

功能点

1. 可配置的侧边栏；
2. 侧边栏点击时跳转至相应的router，若没有该标签则新建，已有则激活这个标签；
3. 点击标签栏中的标签实现下方的路由跳转；
4. 关闭所有标签栏则自动打开至index。

1、侧边栏

src/components/navMenu/navMenu.vue

重点：

1. .over-hide 属性用于解决element-ui中子选项长度有时会超出边框的问题；
2. < el-menu >标签中 : unique-opened属性用于设置只允许一栏处于打开状态，点击某title时，其他title都会折叠起来；router属性用于使其下的标签可以通过:index进行路由跳转（需项目里安装了vue-router）;
3. clickMenu 点击事件：若当前点击标签不在$store.state.openedTab中，则该标签为未打开过的，则触发addTab事件，在便签栏中新建此标签，否则触发changeTab事件，跳转至此标签；

src/store/index.js 的mutations中：

addTab (state, componentName) {
      state.openedTab.push(componentName)
    },
    changeTab (state, componentName) {
      state.activeTab = componentName
    }

4. import menu from ‘@/config/menu-config.js’

src/config/menu-config.js

module.exports = [{
  name: '基础',
  id: 'basic',
  sub: [{
    name: 'BasicLayout',
    componentName: 'BasicLayout'
  }, {
    name: 'BasicContainer',
    componentName: 'BasicContainer'
  }]
}, {
  name: 'Form',
  id: 'form',
  sub: [{
    name: 'BasicRadio',
    componentName: 'BasicRadio'
  }, {
    name: 'BasicCheckbox',
    componentName: 'BasicCheckbox'
  }]
}]

该config文件用于保存侧边栏各个选项的具体内容，需要修改时去修改该文件即可而不需要修改html。

2、标签栏

src/components/navMain/navMain.vue

重点：

1. data中：editableTabsValue 用于设置哪个标签处于激活状态；editableTabs 用于保存所有标签；openedTab用于保存打开过的标签；
2. handleClickTab 方法：点击标签时，触发changeTab事件，切换至相应路由；
3. removeTab 方法：点击标签上的x时触发，关闭该标签，触发deduct方法，跳转至合适的标签并激活，若已经没有标签了，则打开index；

deductTab (state, componentName) {
      let index = state.openedTab.indexOf(componentName)
      state.openedTab.splice(index, 1)
    }

4. computed和watch中的两个方法配合使用，实现监控store中openedTab和activeTab的变化并相应的改变标签栏中的标签状态,实现方式注释里已经写明。

一些补充

1. 通过keep-alive实现各个标签之间切换路由改变时保留缓存（否则输入了一半的input切换个标签回来就没了），但是现在仍存bug：即使标签关闭了，再打开缓存仍在，再慢慢解决；
2. 侧边栏和标签栏之间的联动逻辑较为复杂（对于工作之余刚自学了vue不到一个月的笔者来说），需要考虑的较为周全，包括：新增删除、点击切换、激活标签效果、时时改变openedTab和activeTab等。

鸣谢

https://segmentfault.com/a/1190000012015667#articleHeader7
博主：wangduanduan

不少思路、方法、甚至一些name都参考了这篇文章，受益匪浅，十分感谢！

还请各位同行批评指正，不吝赐教。