element-ui页签改写：路由+缓存模式（keep-alive）

基于element-ui框架实现页签

传送门：

elment-ui页签：https://element.faas.ele.me/#...
keep-alive： https://cn.vuejs.org/v2/api/#...
demo地址：https://github.com/haryzxw/zx...

实现思路

整体：基于element-ui的框架，搭配keep-alive以及路由功能，能实现不同组件的页签切换的缓存功能

核心代码

1.代码片段1

    <div class="el-tab-list">
        <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click='chooseTab'>
          <el-tab-pane
            :key="item.name"
            v-for="(item, index) in editableTabs"
            :label="item.title"
            :name="item.name"
          >
          </el-tab-pane>
        </el-tabs> 
      </div>   
      <keep-alive :include="includeList">
        <router-view></router-view>
      </keep-alive>

• 将element-ui原先写在el-tab-pane标签内的content直接去掉了，换成更灵活的路由写法
• 将页签对应的跳转路由信息（path、query）增加到页签的项中。
• 对应的页面组件需要定义不同的name值，keep-alive的include属性匹配首先检查组件自身的name选项，如果name选项不可用，则匹配它的局部注册名称 (父组件components选项的键值)
• 移除页签的时候，需要将对应组件的缓存也要去掉

2.代码片段2

 // 判断是否已存在同名页签，否则新增页签，并在缓存数组中新增
addTab(item){  
      // 当前新增的页签是否存在页签数组中的判断
      var hasSame = this.editableTabs.filter(item1 => item1.name == item.tab) 
      if(!hasSame.length){
        // 如果此时页签数组没有该项，则将它加入到页签数组中，注意将跳转路由以及组件实例名字同步赋值
        this.editableTabs.push({
          title: item.label,
          name: item.tab,
          router:{
            path: item.path,
            query: item.query
          },
          componentName:item.componentName,
        });
        // 如果此时页签数组没有该项，则将它加入缓存数组中
        this.includeList.push(item.componentName)
      }
      // 改变当前选中的页签值
      this.editableTabsValue = item.tab;
    }, 

• 新增页签时，先判断当前页签数组中是否有对应项，如果没有，则将点击的菜单项加入到页签(包括项的跳转信息及组件实例的名字)
• 新增页签，也要同步修改缓存的includeList的数组
• 修改当前页签选中的值为点击传入的值

注意要点

• 页签的切换其实是路由的切换
• 使用keep-alive时，要注意给对应的缓存组件实例指定唯一name
• 在新增和删除页签时，除了对页签数组做处理以外，还需要对缓存数组做同步处理

总结

这个demo相对比较简单，其他就不多说啦，具体的可以参考demo（demo地址在开头就给啦）。demo里面我也例举了复用组件的情况，当页签为复用组件时，并不能很好的缓存复用组件的页面的状态。因此后来考虑用动态组件的方式去解决这个问题，限于篇幅，动态组件生成页签的方式再单独整理成新的一篇笔记吧（写完会回来放链接的～）
总结&分享，知识能很好的内化。当然也希望能提供一些帮助和参考啦。
行文仓促，欢迎指正！