使用Vue怎么实现多系统切换？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
实现思路
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>看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
