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,

},

);

相关推荐
西陵5 分钟前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构
小磊哥er15 分钟前
【前端工程化】前端工作中的业务规范有哪些
前端
ᥬ 小月亮26 分钟前
webpack基础
前端·webpack
YongGit1 小时前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea2 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc