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,

},

);

相关推荐
软件技术NINI39 分钟前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front2 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie2 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀2 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻2 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树3 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔3 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
Asthenia04123 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj503 小时前
前端基础之《React(1)—webpack简介》
前端·react
被巨款砸中3 小时前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web