前言
公司分好幾個后臺模塊，統一使用vue+elementUi框架開發，每一個后臺模塊都是單獨團隊開發的。并且幾個系統整體的風格、布局一樣的，包括左側邊欄，上方的面包屑等
用戶在使用的時候，可能要切換別的系統就要在瀏覽器里，新打開窗口，再輸入網址，回車。
總結來說，低效，所以現在想將幾個系統融合到一個里邊，并且每次切換系統的時候保留用戶的操作。
https://github.com/Mrblackant/vueIframe
效果如圖：
實現思路
1.結合iframe開發上方系統切換的組件
2.各個子系統有自己的域名
開發
因為每個頁面都需要這個切換功能，所以我們直接在app.vue里開發。我是用vue+element開發的，所以切換的地方直接用了ele的tab切換組件。(寫法有很多種，主要是思路)
讀完這些話再看代碼，方便理解：
1.如果用v-if控制每個iframe的顯示隱藏，那么切換后系統后，再切換回來，iframe的屬性會使頁面會刷新，用戶的操作不能保留
2.如果純粹用elementUi的tab組件來做，頁面一進來，就會把每個系統的資源加載進來，卡的要命，所以需要做到按需加載
3.實現：結合1、2問題，用v-if控制頁面一進來，只加載一個默認的系統；tab切換的時候再利用v-if去加載該系統的資源；v-if只控制一次，不會隨著tab的切換變化，這樣就能保證切換系統時保留了用戶的操作。
代碼
app.vue
<template> <div id="app"><div class="allWapper"> <!-- logo --> <div class="myLogo"> <img src="/static/mylogo.png"> </div> <!-- 頂部tabs --> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane class="temp" label="VUE" name="first"> <iframe v-if="ifArr.first" class="ifa" scrolling=auto src="http://panjiachen.github.io/vue-element-admin/#/dashboard" frameborder="0"></iframe> </el-tab-pane> <el-tab-pane class="temp" label="SF" name="second"> <iframe v-if="ifArr.second" class="ifa" scrolling=auto src="https://segmentfault.com/" frameborder="0"></iframe> </el-tab-pane> <el-tab-pane class="temp" label="百度" name="third"> <iframe v-if="ifArr.third" class="ifa" scrolling=auto src="https://www.baidu.com/" frameborder="0"></iframe> </el-tab-pane> </el-tabs></div><!-- </div> --> <!-- <router-view/> --> </div></template><script>export default { name: 'App', data(){ return{ activeName: 'first', ifArr:{ first:true, second:false, third:false } } }, methods:{ handleClick(tab, event) { let flagName=tab.name this.ifArr[flagName]=true } }}</script><style>body{ margin:0; padding:5px;}.ifa{ width:100%;height:100%; } .el-tabs__content{ border: 1px solid red; border-top:none; position: absolute; top: 62px; left: 0; bottom: 0; right: 0; // width:100%; // height:80%; } .allWapper{ display:flex; border-bottom:1px solid #e4e7ed; } .el-tabs__header{ margin-bottom:0px; } .el-tabs__header .el-tabs__item{ margin:8px 0; font-size:16px; padding-left:29px; } .temp{ width:100%; height:100%; }.myLogo{ width: 200px; height: 53px; margin-right:35px;}.myLogo img{ width:100%;}</style>新聞熱點
疑難解答
