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,

},

);

相关推荐
我爱李星璇4 分钟前
HTML常用表格与标签
前端·html
疯狂的沙粒8 分钟前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员23 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐25 分钟前
前端图像处理(一)
前端
程序猿阿伟33 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒34 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪43 分钟前
AJAX的基本使用
前端·javascript·ajax
力透键背1 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M1 小时前
node.js第三方Express 框架
前端·javascript·node.js·express
盛夏绽放1 小时前
Node.js 和 Socket.IO 实现实时通信
前端·后端·websocket·node.js