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,

},

);

相关推荐
excel5 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel6 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼7 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping7 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙8 小时前
[译] Composition in CSS
前端·css
白水清风8 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix9 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278009 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端9 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧9 小时前
Promise 的使用
前端·javascript