1.需求

這兩天工作中遇到一個這樣的需求，切換tab標簽時，要求對應的tab頁面不刷新，但是項目中加入了一部分含有iframe的頁面，在切換路由的過程中，如果使用keep-alive是達不到緩存ifram嵌套的頁面效果的。

2.使用keep-alive緩存不了iframe界面的原因

• vue中的keep-alive

1>.原理：vue 的緩存機制并不是直接存儲 DOM 結構，而是將 DOM 節(jié)點抽象成了一個個 VNode節(jié)點。因此，Vue 的 keep-alive 緩存也是基于 VNode節(jié)點 而不是直接存儲 DOM 節(jié)點。在需要渲染的時候從Vnode渲染到真實DOM上。

2>.參數(shù)：Keep-alive 組件提供了 include 和 exclude 兩個屬性，允許組件有條件的進行緩存。
include: 字符串或正則表達式。只有匹配的組件會被緩存。
exclude: 字符串或正則表達式。任何匹配的組件都不會被緩存。

3>.iframe中keep-alive機制失效原因:iframe頁里的內(nèi)容并不屬于節(jié)點的信息，所以使用keep-alive依然會重新渲染iframe內(nèi)的內(nèi)容。而且iframe每一次渲染就相當于打開一個新的網(wǎng)頁窗口，即使把節(jié)點保存下來，在渲染時iframe頁還是刷新的。

3. vue中實現(xiàn)iframe內(nèi)容緩存的思路

• 保存iframe頁里的節(jié)點信息我們很難去操作，這個時候我們就該想是否能在vue的route-view節(jié)點上動些手腳。
• 我們可以在切換不含iframe的界面時使用vue路由，在切換含iframe頁的界面時利用v-show來控制顯示隱藏，使iframe的節(jié)點不被刪除，以此來防止界面節(jié)點被重新更新，從而達到保存iframe節(jié)點數(shù)據(jù)的效果。

4. 解決步驟：

綜上所述，主要思路就是利用v-show去控制對應tab的iframe顯示隱藏，使iframe的節(jié)點不被刪除，以此來防止界面節(jié)點被重新更新，從而達到iframe頁面的緩存效果。

• iframe頁面對應的路由配置：如下：

  {
    path: '',
    component: Layout,
    redirect: 'indexNew1',
    hidden: true,
    children: [
      {
        path: 'indexNew1',
        component: (resolve) => require(['@/views/indexNew1'], resolve),
        meta: { title: ''}
      },
    ]
  },
  // 在這里需要找到Layout文件中對應的<router-view>

-根據(jù)上面的路由配置，找到了對應的layout組件中的router-view的引用，即appMain.vue頁面文章來源地址http://www.zghlxwxcb.cn/news/detail-442323.html

<template>
  <section class="app-main" :class="this.$route.path=='/tinyApp/tinyAppRate'?'app1':''">
    <transition name="fade-transform" mode="out-in">
      <keep-alive>
		// 這里加載的就是正常的vue頁面
        <router-view v-if="this.$route.path!=='/indexNew1'" />
      </keep-alive>
    </transition>
    // 針對iframe嵌套的頁面需要將封裝的iframe組件引入，因為是多個嵌套的頁面，所以這里需要循環(huán)生成
    <iframe-index 
      v-show="$route.query.id==item.id"
      v-for="item of tabSetList"
      :key="item.id"
      :newSrc="item.baseUrl"
    ></iframe-index>
    //這里的tabSetList數(shù)組就是你點擊某菜單對應的此菜單信息的iframe相關屬性
    //因為tab有刪除功能，所以不能用下標做key值
  </section>
</template>
<script>
// 引入iframe組件
import iframeIndex from "@/views/indexNew1.vue";
export default {
  name: 'AppMain',
  components:{
    iframeIndex
  },
  data(){
    return{
      tabList:[],
      tabSetList:[],
    }
  },
  watch:{
    $route(){
      console.log('Rouer ------ ',this.$route)
    },
    //這里是根據(jù)我項目的需求寫的具體邏輯，不用參考
  	'$store.state.tagsView.sceneViews'(newVal){
      this.tabList = [...newVal]
      this.tabSetList = this.tabList.filter((currentValue, currentIndex, selfArr) =>{
        return selfArr.findIndex(x =>x.name === currentValue.name) === currentIndex
      });
	}
  },
}
</script>

• 封裝一個對應的iframe顯示的組件

// 這里只是放了部分代碼 具體邏輯根據(jù)對應的需求添加即可
<template>
    <div class="dashboard-editor-container">
        <div style="width: 100%" class="itemflex-div">
          <iframe
            :src="newSrc"
            class="iframemain"
            allowfullscreen="true"
            id="iframeId"
          ></iframe>
        </div>
    </div>
</template>
<script>
export default {
  props:{
    newSrc:{
      type:String,
      default:''
    }
  },
};
</script>

• 綜上所述，就是實現(xiàn)多iframe嵌套頁面在切換tab時可以緩存對應頁面的信息
• 注意：因為tab一版包括刪除功能，所以在循環(huán)iframe組件時對應的key值不能用數(shù)組下標，取一個唯一值即可，這里我取的是id

到了這里，關于vue項目關于iframe嵌套的頁面，在切換tab標簽時會被重新刷新的問題處理方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！