使用Vue怎么實(shí)現(xiàn)多系統(tǒng)切換

使用Vue怎么實(shí)現(xiàn)多系統(tǒng)切換？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

實(shí)現(xiàn)思路

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

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

開發(fā)

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

代碼

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>

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。