代碼貼前面，gitee地址：https://gitee.com/chkhk/vue-element-admin 可以自行拉到本地運行看看效果
預覽效果，可以拉到文章最底下看 GIF
起因
最近做的后台管理系統，用的是 vue-element-admin 的框架。
然后又有嵌入其它系統頁面的需求，一開始是直接放在頁面上的 iframe，但是發現切換頁面再切換回去后，iframe 也跟着一起刷新了：
比如你嵌入了百度，你在百度搜了個東西，然后到其他頁面去操作了，然后回到百度，就會發現之前的搜索結果不見了，又變回百度首頁了
在網上翻了幾圈也沒有發現一個好一點的解決方案，於是准備自己寫一個。
效果
要求直接在框架里嵌入其他系統的頁面，在切換頁面的時候能保留 iframe 之前的操作狀態
分析
vue-element-admin 主要的頁面區域，用了 vue 的 keep-alive 組件，在通過 TagView 切換時，對應匹配到的頁面組件，數據是會被緩存起來的。
所以一般頁面直接切換后，之前的操作都還是恢復到切換前的，沒有改變。它本身並不是單純的顯示隱藏，而是會去銷毀重載 dom 節點的，所以在頁面上添加的 iframe ，自然也沒辦法保留操作。
然后自己一開始想了幾個方案，比如修改路由，增加參數，動態的判斷該頁面是走顯示隱藏邏輯還是 keep-alive。會變得很復雜，且對原框架修改比較大，所以想找個簡單一點的方法。（其實還是實力不足，哈哈）
方案
后來想到的解決辦法是，不改路由這些，原來怎么操作頁面，現在還是怎么操作。直接在 AppMain 組件（主顯示區）蓋上一層，專門顯示 iframe 頁面。這樣只需要簡單的配置和操作，就能實現效果。比較方便，而且簡單。
大概思路就是，專門一個 iframes 組件，蓋在主顯示層上，每次打開對應頁面時，通過 vuex 共享狀態，新增，顯示，隱藏，銷毀對應的 iframe，因為用的是顯示隱藏，所以切換后還能保留切換前的狀態。
代碼
改動其實不大，添加4個新文件，修改一個文件，如下圖：
具體的內容可以查看本次提交：
https://gitee.com/chkhk/vue-element-admin/commit/9f1fcd03f92acf32d542fa322140a4e8feb724bb
使用 demo 可以查看 gitee 項目 https://gitee.com/chkhk/vue-element-admin
對比
iframes 效果：
總結
以上就是記錄一下自己的學習過程吧，解決問題后還是挺開心的，實現也是用的最簡單的思路了
如果有其它更好的方案，也希望大佬能在評論區交流交流啦