网站建设资讯

NEWS

网站建设资讯

使用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://cdweb.net/article/gchdss.html