1、背景

• 一个旧的vue2项目，需要 缓存历史页签，增加tabs展示，你会怎么实现呢？

• 此项目 核心页面是项目编辑页面，客户需要支持 同时打开多个项目编辑页面，页面之间切换，之前编辑的数据状态保存；
• 此项目原来只支持从首页，跳到列表页面，点击 编辑按钮 跳转至详情，将页面详情数据存储在全局vuex里面；直接刷新页面，页面会跳转回首页

2、二种实现方式

用数组存储历史打开页面信息，用tabs组件展示 历史页面

2.1 keep-alive

• 使用 vue的 keep-alive组件，更新includes数组
• 难点：内存太大；vuex数据的替代和缓存；页面wacth需要处理；
• 方案：数组保存所有页面vuex数据，切换页面前重新赋值 vuex active的数据

2.2 使用iframe

• layout 组件 tab-content 展示 iframe 列表
• 难点：数据初始化；页面通讯
• 方案： 详情页面改造；postmessage通讯;外层window 始终展示 layout组件，iframe url为 /page1、/page2

[{
      path:'/pe/:path*',
      name:'iframe_list',
      components:{
         default:()=>import('@/layout/index.vue')
      }
    },
    {
      path:'/page1',
      name:'page1',
      components:{
         default:()=>import('@/views/page1.vue')
      }
    },
    {
      path:'/page2',
      name:'page2',
      components:{
         default:()=>import('@/views/page2.vue')
      }
    }
]

欢迎关注我的前端自检清单，我和你一起成长