Vue 多系統切換實現方案(iframe嵌套的兩三事)

前言

公司分好幾個後臺模塊，統一使用vue+elementUi框架開發，每個後臺模塊都是單獨團隊開發的。而且幾個系統總體的風格、佈局同樣的，包括左側邊欄，上方的麪包屑等
用戶在使用的時候，可能要切換別的系統就要在瀏覽器裏，新打開窗口，再輸入網址，回車。
總結來講，低效，因此如今想將幾個系統融合到一個裏邊，而且每次切換系統的時候保留用戶的操做。
線上demo:http://an888.net/all/#/
github:https://github.com/Mrblackant...

效果如圖：

實現思路

1.結合iframe開發上方系統切換的組件
2.各個子系統有本身的域名

開發

由於每一個頁面都須要這個切換功能，因此咱們直接在app.vue裏開發。我是用vue+element開發的，因此切換的地方直接用了ele的tab切換組件。(寫法有不少種，主要是思路)
讀完這些話再看代碼，方便理解：
1.若是用v-if控制每一個iframe的顯示隱藏，那麼切換後系統後，再切換回來，iframe的屬性會使 頁面會刷新，用戶的操做不能保留
2.若是純粹用elementUi的tab組件來作，頁面一進來，就會把每一個系統的資源加載進來，卡的要命，因此須要作到按需加載
3. 實現：結合一、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>

前端小學生，歡迎你們來指正、交流