Vue多系統(tǒng)切換實現(xiàn)方案

更新時間：2018年06月05日 08:53:14 作者：大師兄

本篇文章給大家分享了關于Vue多系統(tǒng)切換實現(xiàn)的解決方案，對此有需要的朋友可以跟著參考學習下。

前言

公司分好幾個后臺模塊，統(tǒng)一使用vue+elementUi框架開發(fā)，每一個后臺模塊都是單獨團隊開發(fā)的。并且?guī)讉€系統(tǒng)整體的風格、布局一樣的，包括左側邊欄，上方的面包屑等
用戶在使用的時候，可能要切換別的系統(tǒng)就要在瀏覽器里，新打開窗口，再輸入網(wǎng)址，回車。
總結來說，低效，所以現(xiàn)在想將幾個系統(tǒng)融合到一個里邊，并且每次切換系統(tǒng)的時候保留用戶的操作。

https://github.com/Mrblackant/vueIframe

效果如圖：

實現(xiàn)思路

1.結合iframe開發(fā)上方系統(tǒng)切換的組件

2.各個子系統(tǒng)有自己的域名

開發(fā)

因為每個頁面都需要這個切換功能，所以我們直接在app.vue里開發(fā)。我是用vue+element開發(fā)的，所以切換的地方直接用了ele的tab切換組件。(寫法有很多種，主要是思路)
讀完這些話再看代碼，方便理解：
1.如果用v-if控制每個iframe的顯示隱藏，那么切換后系統(tǒng)后，再切換回來，iframe的屬性會使頁面會刷新，用戶的操作不能保留
2.如果純粹用elementUi的tab組件來做，頁面一進來，就會把每個系統(tǒng)的資源加載進來，卡的要命，所以需要做到按需加載
3.實現(xiàn)：結合1、2問題，用v-if控制頁面一進來，只加載一個默認的系統(tǒng)；tab切換的時候再利用v-if去加載該系統(tǒng)的資源；v-if只控制一次，不會隨著tab的切換變化，這樣就能保證切換系統(tǒng)時保留了用戶的操作。

代碼

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>

您可能感興趣的文章: