Vue3如何对内嵌Iframe组件进行缓存
投稿:jingxian
这篇文章主要介绍了Vue3如何对内嵌Iframe组件进行缓存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
1:应用场景
对于系统内所有内嵌iframe 的页面均通过同一个路由'/iframe', 在router.query内传入不同src 参数,在同一组件内显示iframe 内嵌页面,对这些页面分别进行缓存。
主要是通过v-show 控制显示隐藏从而达到iframe 缓存逻辑
2:路由文件配置 router/index.ts
{ name: 'iframe', path: '/iframe', component: Iframe, },
3:修改home.vue 文件
3.1 增加变量判断是否先死iframe 组件
// 根据路由判断是否显示Iframe 组件 const iframeShow = computed(() => route.value?.path.indexOf('/iframe') === 0);
3.2 在state 中添加响应式数据
wrapperMap, iframeComList
const state = reactive({ // 保存相同iframe 组件修改之后的组件名称同iframe套壳组件的映射关系 wrapperMap: new Map(), // wrapperMap 转换成的数组,循环遍历生成iframe组件 iframeComList: [] as any, });
3.3 对同一iframe
路由传入不同参数的组件套壳修改name 进行缓存
const wrap = (name:any, query:any, component:any) => { let wrapper; const wrapperName = name + '-' + query.catchName; if (state.wrapperMap.has(wrapperName)) { wrapper = state.wrapperMap.get(wrapperName); } else { wrapper = { name: wrapperName, render() { return h('div', { className: 'vaf-page-wrapper' }, component); }, }; state.wrapperMap.set(wrapperName, wrapper); } return h(wrapper); };
3.4 在template 部分增加组件
通过v-show 控制ifram 路由缓存的组件是否渲染
<!-- :class="{'content-fill':!showAside}" --> <router-view v-if="!iframeShow" /> <!-- iframe 组件缓存 --> <div v-show="iframeShow" class="iframe-container"> <component :is="h(wrapperMap.get(item[0]))" v-for="(item) in iframeComList" v-show="iframeShow && item[0] === (String(route?.name) + '-'+ route.query.VIRTUAL_NAME)" :key="item[0]" /> </div>
3.5 监听路由
/** * 监听路由生成新的iframe 组件并保存 */ watch( () => route, (newValue, oldValue) => { if (route.value.path.indexOf('/iframe') === 0) { wrap(route.value.name, route.value.query, h(Iframe)); nextTick(() => { state.iframeComList = [...state.wrapperMap]; }); } }, { deep: true, immediate: true, }, );
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。