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

时间：2023-04-02 22:33:07 HTML

基于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该框架具有保活和路由功能，可以实现不同组件tab切换的缓存功能。核心代码一、代码片段1chooseTab'>

去掉原来的element-ui内容直接写在el-tab-pane标签中，换成更灵活的路由方式，改变tab对应的跳转路由信息(path,query)添加到tab的items中。对应的页面组件需要定义不同的名称值。keep-alive的include属性匹配首先检查组件本身的name选项。如果名称选项不可用，则删除匹配的本地注册名称（父组件组件选项的键值）。Tab键时，需要删除对应组件的缓存。2.代码片段2//判断是否已经存在同名的tab，否则添加新的tab，并在缓存数组中添加addTab(item){//current判断tab数组中是否存在新添加的tabvarhasSame=this.editableTabs.filter(item1=>item1.name==item.tab)if(!hasSame.length){//如果此时的tab数组中没有这个item，则添加到tab数组中,注意同步分配跳转路由和组件实例名item.componentName,});//如果此时tab数组中没有该item，则将其添加到缓存数组中this.includeList.push(item.componentName)}//改变当前选中tab的值this.editableTabsValue=item.tab;},添加新的tab时，首先判断当前tab数组中是否有对应的item，如果没有，则将点击的菜单项添加到tab中（包括item的跳转信息和组件实例的名称）添加新建一个tab，同步修改缓存的includeList的数组。将当前选项卡的选中值修改为点击传入的值。注意，tab的切换其实就是路由的切换。使用keep-alive时，注意为对应的缓存组件实例指定一个唯一的名字。添加和删??除标签时，除了处理标签数组外，还需要同步缓存数组。总结这个demo比较简单。其他话不多说，具体可以参考demo（开头给出了demo的地址）。在demo中，我也举例说明了可重用组件的情况。Whenthetabisareusablecomponent,thereusablecomponentcannotbewellcached.页面的状态。因此，我后来考虑使用动态组件来解决这个问题。由于篇幅有限，动态组件生成tabs的方式会整理成一个新的笔记（我写完会贴出链接~）总结&分享，知识可以很好的内化。当然，也希望能提供一些帮助和参考。文笔仓促，欢迎指正！

上一篇：元宵节给网站挂个灯笼

下一篇：吃透XSS和CSRF

element-ui标签重写：路由+缓存模式（keep-alive）相关文章