平常在单应用的情况下实现多页签并不难，可以使用vue的keep-alive组件，当在微前端下多个子应用跨应用之间怎么缓存，主要问题是要把数据存储起来，切换应用时调用缓存数据。
1.在基座中创建数据集中管理tabStore.js（存储核心）
主要核心一套数据的增删改查：
export let vnodeStore = []
1. 获取store方法
getStore(){
//返回 vnodeStore
}
2.设置页面store
setStore(pageInfo){
//pageInfo页面数据信息
//判断如果pageInfo.key、pageInfo.name、pageInfo.vnode、pageInfo.path都为true的情况下往vnodeStore 中进行push数据
}
3.getVnode(key){
//传入页面key来获取store中存储的页面信息可用循环遍历取出
}
4.updateVnode({key, path, vnode}){
//根据key从getVnode中取出存在的数据
//判断如果取到的话更新vnode与path
}
5.clearById(key){
//根据key从getVnode中取出存在的数据
//判断如果存在可以使用数组的splice方法删除vnodeStore 中存在的数据
}，
6.clearAll(){
//此方法删除vnodeStore 中的数据即可
}
2.基于keep-alive组件实现一个缓存组件
props: {
tabStore: {
type: Object,
defalut: null
}
}
render(){
let vnode = this.$slots.default ? this.$slots.default[0] : null //获取keep-alive默认插槽中的内容
//如果vnode为true 取出vnode.key
//获取当前路由信息
//使用vnode.key与路由拼成一个唯一key
if(vnode.key.indexOf(routerKey) === -1){
vnode.key = vnode.key + routerKey
}
使用当前路由path调用getVnode(path)获取页面信息
let pageInfo = this.tabStore.getVnode(this.$route.path)
if(pageInfo){
//如果存在缓存证明已经被缓存过了直接渲染
if(vnode.key===pageInfo.vnode.key){
vnode.componentInstance = pageInfo.vone.componentInstance;
}else{
this.tabStore.updateVnode( //如果pageInfo存在且不是当前key，需要更新缓存
{
key:xxx，
path: xxx..,
vnode
}
)
}
}else{
tish.tabStore.setStore( //不存在pageInfo的情况下缓存页面
{
key:xxx，
path: xxx..,
vnode
}
)
}
return vnode
}
3.在页面中调用
<keep-alive :store="store"> //此处的store需要全子应用共享才可以做到统一
<router-view/>
</keep-alive>
4.在布局中加入页签展示位置
//数据来源为全局store
<tab v-for="storeData" @click="handleClick(item)"></tab>
data(){
return{
storeData: []
}
}
created:{
onStoreChange(){ //使用bus监听store数据变化更改页签展示
this.storeData = xxx
}
},
methods:{
handleClick(item){
window.hash = item.url //用于点击页签路由跳转
}
}
