问题描述:
在路由跳转时,如果当前页面嵌套了iframe,iframe嵌套的页面每次都会重新加载一遍,这样体验肯定不好的。
问题原因:
iframe标签存储在DOM中,而vue的缓存机制并不是直接存储 DOM 结构,导致vue中使用iframe无法对其进行缓存
解决方案:
利用隐藏和显示,不是真实的去切换。
修改的地方:
路由页面
父容器页面
<template> <div class="dashboard-container"> <div style="flex-direction: row;display: flex;height: 60px;background-color: transparent;z-index: 999"> <el-menu style="height: 50px;background-color: transparent;border-bottom-color: transparent" :router="true" :default-active="activeIndex" mode="horizontal" @select="handleSelect" text-color="#09BEE6" active-text-color="#43B5B5"> <el-menu-item index="/threeModel"><i class="el-icon-message"/>三维模型</el-menu-item> <el-menu-item index="/costManagement"><i class="el-icon-user"/>造价管理</el-menu-item> <el-menu-item index="/qRcodeManagement"><i class="el-icon-mobile-phone"/>二维码管理</el-menu-item> <el-menu-item index="/accountManagement"><i class="el-icon-user"/>账号管理</el-menu-item> </el-menu> </div> <keep-alive><router-view/></keep-alive> <!-- iframe页 --> <component v-for="item in hasOpenComponentsArr" :key="item.name" :is="item.name" v-show="$route.path === item.path" ></component> </div> </template> <script> import { mapGetters } from 'vuex' import Vue from 'vue' export default { name: 'Dashboard', data() { return { activeIndex: '/threeModel', userName: '', iframeArr: [], componentsArr: [] // 含有iframe的页面 } }, created() { this.$router.push('threeModel') // 设置iframe页的数组对象 const componentsArr = this.getComponentsArr(); componentsArr.forEach((item) => { Vue.component(item.name, item.component); }); this.componentsArr = componentsArr; // 判断当前路由是否iframe页 this.isOpenIframePage(); }, watch: { $route() { // 判断当前路由是否iframe页 this.isOpenIframePage(); } }, computed: { ...mapGetters([ 'name' ]), // 实现懒加载,只渲染已经打开过(hasOpen:true)的iframe页 hasOpenComponentsArr() { return this.componentsArr.filter(item => item.hasOpen); } }, methods: { // 根据当前路由设置hasOpen isOpenIframePage() { const target = this.componentsArr.find(item => { return item.path === this.$route.path }); if (target && !target.hasOpen) { target.hasOpen = true; } }, // 遍历路由的所有页面,把含有iframeComponent标识的收集起来 getComponentsArr() { const router = this.$router; const routes = router.options.routes; this.getIframe(routes) return this.iframeArr.map((item) => { const name = item.name || item.path.replace('/', ''); return { name: name, path: item.path, hasOpen: false, // 是否打开过,默认false component: item.iframeComponent // 组件文件的引用 } }) }, getIframe(arr) { arr.map(item => { if(item.iframeComponent) { this.iframeArr.push(item); } if(item.children && item.children.length > 0) { this.getIframe(item.children) } }) }, } } </script>