项目功能点：【主项目使用iframe引入其它项目】vue keep-alive iframe失效问题记录

先上几个参考

https://blog.csdn.net/weixin_44490109/article/details/110191582
https://juejin.cn/post/7246310077233659941?searchId=202408151542026DBF76A1E9519FEF28BA
https://github.com/jmx164491960/vue-iframe-demo

网上搜到的思路大致一样

记录遇到的问题

1.导致keep-live部分情况下是失效

错误代码示例

<router-view v-slot="{ Component }">
     <div class="vab-app-main-iframe" v-if="route.meta && route.meta.iframe && route.meta.iframe == true">
          <component :is="Component" :key="routerKey" ref="componentRef" />
     </div>
     <keep-alive :include="keepAliveNameList" :max="keepAliveMaxNum" v-else>
          <component v-if="routerKey" :is="Component" :key="routerKey" ref="componentRef" />
     </keep-alive>
  </router-view>

如上代码 最初的想法 都放在 router-view 内，在定义的路由上做标识。判断走keepalive 还是走动态组件component 展示。
还一个尝试 将keepalive和动态组件component 分开由两个 router-view 承载，判断路由标识，
问题：
上面的尝试 ，打开多个项目自身菜单，来回切换没有问题，能缓存，一切正常，当再打开一个引入的页面后，切回项目自身菜单，keepalive效果失效了....

2.最终代码说明

<router-view v-slot="{ Component }">
   <keep-alive :include="keepAliveNameList" :max="keepAliveMaxNum">
        <component v-if="routerKey" :is="Component" :key="routerKey" ref="componentRef" />
   </keep-alive>
 </router-view>

  <iframe-template v-for="item in iframeOpenRouteList" :key="item.name" :url="item.meta.iframe" v-show="route.path === item.path" :ref="(el) => setDivRef(el, item.name)"></iframe-template>

总结

1.方案总结

1.修改路由定义，添加iframe标识，不设置 component 字段
2.定义一个通用的iframe组件 ，主界面(appMain.vue)中，如上代码，本项目菜单走router-view,iframe菜单使用iframe组件展示内容，切换到iframe菜单的时候使用隐藏/显示控制。
3.主界面(appMain.vue)中 从打开的菜单数据(list)中，计算出哪些是 iframe菜单，v-for循环展示多个

2.设置 component 字段的原因

不设置component字段（或者使用其它字段 代替component字段） 造成的后果就是在 router-view 节点中渲染时，页面显示的是空白页。然后就可以使用模板展示内容了

扩展

666