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,
? ? ? },
? ? );
