Vue3如何對內(nèi)嵌Iframe組件進行緩存

更新時間：2025年04月25日 09:00:46 投稿：jingxian

這篇文章主要介紹了Vue3如何對內(nèi)嵌Iframe組件進行緩存問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

1：應用場景

對于系統(tǒng)內(nèi)所有內(nèi)嵌iframe 的頁面均通過同一個路由'/iframe', 在router.query內(nèi)傳入不同src 參數(shù)，在同一組件內(nèi)顯示iframe 內(nèi)嵌頁面，對這些頁面分別進行緩存。

主要是通過v-show 控制顯示隱藏從而達到iframe 緩存邏輯

2：路由文件配置 router/index.ts

{
name: 'iframe',
path: '/iframe',
component: Iframe,
},

3：修改home.vue 文件

3.1 增加變量判斷是否先死iframe 組件

// 根據(jù)路由判斷是否顯示Iframe 組件
const iframeShow = computed(() => route.value?.path.indexOf('/iframe') === 0);

3.2 在state 中添加響應式數(shù)據(jù)

wrapperMap, iframeComList

const state = reactive({
// 保存相同iframe 組件修改之后的組件名稱同iframe套殼組件的映射關系
wrapperMap: new Map(),
// wrapperMap 轉換成的數(shù)組，循環(huán)遍歷生成iframe組件
iframeComList: [] as any,
});

3.3 對同一iframe

路由傳入不同參數(shù)的組件套殼修改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 監(jiān)聽路由

/**
* 監(jiān)聽路由生成新的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,
},
);