使用Vue怎么实现多系统切换-创新互联

使用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





看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。


当前标题:使用Vue怎么实现多系统切换-创新互联
标题来源:http://pwwzsj.com/article/eeeic.html