基于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里面我也例举了复用组件的情况，当页签为复用组件时，并不能很好的缓存复用组件的页面的状态。因此后来考虑用动态组件的方式去解决这个问题，限于篇幅，动态组件生成页签的方式再单独整理成新的一篇笔记吧（写完会回来放链接的～）
总结&分享，知识能很好的内化。当然也希望能提供一些帮助和参考啦。
行文仓促，欢迎指正！
