媒介

公司分好幾個背景模塊，一致運用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.
完成：連繫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>

前端小學生，迎接人人來斧正、交換