好发信息网网站建设,个人网站推荐,网址大全4399,建设网站模板免费下载1#xff1a;应用场景
对于系统内所有内嵌iframe 的页面均通过同一个路由/iframe, 在router.query内传入不同src 参数#xff0c;在同一组件内显示iframe 内嵌页面#xff0c;对这些页面分别进行缓存。主要是通过v-show 控制显示隐藏从而达到iframe 缓存逻辑
2#xff1a…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-showiframeShow classiframe-container component :ish(wrapperMap.get(item[0])) v-for(item) in iframeComList v-showiframeShow item[0] (String(route?.name) - route.query.VIRTUAL_NAME) :keyitem[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, }, );
