1、序言
最近工作中，專案上遇到一個這樣的需求，就是在開啟報表的列印預覽介面時，去切換標籤，切回列印預覽介面的時候，要求介面不重新整理。vue框架中，我們去處理此類問題，通常馬上就會想到去使用vue框架中自帶的keep-alive元件，所以一開始我也是去使用了keep-alive,但是發現沒有達到預期效果，後面通過研究和查閱資料發現，在vue專案中加入了含有iframe的頁面，在路由切換的過程中，使用keep-alive是達不到資料快取的效果的。

2、使用keep-alive快取不了iframe介面原因
（1）vue中的keep-alive
【1】原理：Vue 的快取機制並不是直接儲存 DOM 結構，而是將 DOM 節點抽象成了一個個 VNode節點。因此，Vue 的 keep-alive 快取也是基於 VNode節點 而不是直接儲存 DOM 節點。在需要渲染的時候從Vnode渲染到真實DOM上。
【2】引數：Keep-alive 元件提供了 include 和 exclude 兩個屬性，允許元件有條件的進行快取。
　　include: 字串或正則表示式。只有匹配的元件會被快取。
　　exclude: 字串或正則表示式。任何匹配的元件都不會被快取。
【3】Keep-alive 元件提供了兩個生命鉤子函式，分別是 activated 和 deactivated 。
　　activated ：當頁面存在快取的時候執行該函式。
　　deactivated ：在頁面結束時觸發該方法，可清除掉滾動方法等快取。
（2）iframe中keep-alive機制失效原因：iframe頁裡的內容並不屬於節點的資訊，所以使用keep-alive依然會重新渲染iframe內的內容。而且iframe每一次渲染就相當於開啟一個新的網頁視窗，即使把節點儲存下來，在渲染時iframe頁還是重新整理的。

3、vue中實現iframe內容快取的思路
（1）儲存iframe頁裡的節點資訊我們很難去操作，這個時候我們就該想是否能在vue的route-view節點上動些手腳。
（2）我們可以在切換不含iframe的介面時使用vue路由，在切換含iframe頁的介面時利用v-show來控制顯示隱藏，使iframe的節點不被刪除，以此來防止介面節點被重新更新，從而達到儲存iframe節點資料的效果。
具體該怎麼操作呢？請繼續往下看：
第一步：我們先需要修改一下路由配置，如下：

{
path: '/printReportShow',
component: Layout,
redirect: '/printReportShow',
hidden: false,
name: 'Layout',
children: [
{
path: '/printReportShow',
iframeComponent: printReportShow,
name: 'printReportShow',
hidden: false,
meta: {title: '列印預覽',}
}
]
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
從以上程式碼，不難看出/printReportShow就是我們要跳轉的路由地址，我們可以看到printReportShow的路由配置中元件我寫的是iframeComponent而非官方教程中的component，這樣造成的後果就是在 router-view 節點中渲染時，頁面顯示的是空白頁。
第二步：修改主介面AppMain.vue(你的可能不叫這個)中的template，新增vue的內建元件component，如下：

<template>
<section class="app-main">
<transition name="move" mode="out-in" @enter="onEnter">
<keep-alive :include="cachedViews">
<router-view :key="key" />
</keep-alive>
</transition>
<!--iframe頁-->
<component
v-for="item in hasOpenComponentsArr"
:key="item.children[0].name"
:is="item.children[0].name"
v-show="$route.path === item.path"
></component>
</section>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
從以上程式碼我們可以看到，iframe節點資料在根節點App.vue渲染時，也隨即跟著渲染了，但是考慮到效能原因，對此我們選擇將iframe的顯示做成懶載入形式的，只有在使用者進入相應的頁面時才觸發渲染，在渲染完畢後再通過v-show去控制介面在切換時的顯示與隱藏。
第三步：AppMain.vue中具體的邏輯處理

<script>
import Vue from 'vue';
export default {
name: 'AppMain',
computed: {
// 實現懶載入，只渲染已經開啟過（hasOpen:true）的iframe頁
hasOpenComponentsArr() {
return this.componentsArr.filter(item => {
return item.children[0].hasOpen
});
}
},
data() {
return {
componentsArr: []
}
},
watch: {
$route() {
// 判斷當前路由是否iframe頁
this.isOpenIframePage();
}
},
created() {
// 設定iframe頁的陣列物件
const componentsArr = this.getComponentsArr();
componentsArr.forEach((item) => {
// Vue.component(item.name, item.component);
Vue.component(item.children[0].name, item.children[0].component);
});
this.componentsArr = componentsArr;
// 判斷當前路由是否iframe頁
this.isOpenIframePage();
},
methods:{
// 根據當前路由設定hasOpen
isOpenIframePage() {
const target = this.componentsArr.find(item => {
return item.path === this.$route.path
});
if (target && !target.children[0].hasOpen) {
target.children[0].hasOpen = true;
}
},
// 遍歷路由的所有頁面，把含有iframeComponent標識的收集起來
getComponentsArr() {
const router = this.$router;
const routes = router.options.routes;
const iframeArr = []
const singleRoutes = routes[6];
const printReportObj = {
name: routes[6].children[0].name,
path: routes[6].children[0].path,
hasOpen: false, // 是否開啟過，預設false
component: routes[6].children[0].iframeComponent // 元件檔案的引用
}
singleRoutes.children.splice(0,1);
singleRoutes.children.push(printReportObj);
iframeArr.push(singleRoutes);
return iframeArr
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
備註：由於我們系統中就涉及到一個iframe介面，所以在處理上可能有些地方寫死了，如果時多iframe的可以自行參考著做相應的修改。

4、拓展
由於切換標籤，含iframe的component元件不會再觸發路由鉤子函式和生命週期函式，導致介面資料無法做更新操作，同時瀏覽器重新整理時，介面資料會有丟失的問題，所以我們可以考慮去監聽sessionStorage的值，以此來更新資料。詳情可以看下面這篇文章：vue中如何實現對sessionStorage的監聽。

5、結語：
在這裡要特別感謝jmx164491960老哥的提供的demo，感興趣的小夥伴可以點選此處：git-vue中實現iframe頁面的資料快取，給予了很大的幫助。
————————————————
版權宣告：本文為CSDN博主「我在小樓聽著風」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/weixin_44490109/article/details/110191582