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,

},

);

相关推荐
Knight_AL1 分钟前
大文件分片上传:简单案例(前端切割与后端合并)
前端·状态模式
雨过天晴而后无语3 分钟前
HTML纯JS添加删除行示例一
前端·javascript·html
IT_陈寒3 分钟前
Vue3性能翻倍秘籍:5个被低估的Composition API技巧让你开发效率飙升🚀
前端·人工智能·后端
袁煦丞4 分钟前
N1+iStoreOS+cpolarN1盒子变身2048服务器:cpolar内网穿透实验室第653个成功挑战
前端·程序员·远程工作
哀木6 分钟前
聊聊 vue2 与 vue3 的 v-model
前端
前端小蜗9 分钟前
🌐 利用Chrome内置 【AI翻译 API】实现国际化
前端·javascript·浏览器
寒月霜华9 分钟前
JaveWeb后端-Web基础-SpringBoot Web、HTTP协议
前端·spring boot·http
袁煦丞10 分钟前
管家婆远程开单自由飞!管家婆系统:cpolar内网穿透实验室第646个成功挑战
前端·程序员·远程工作
Dontla11 分钟前
前端V0介绍(Vercel推出的AI前端生成工具)
前端·人工智能
fury_12311 分钟前
vue3:trycatch里面可以在写一个trycatch吗
前端