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