Vue 多系统切换实现方案(iframe嵌套的两三事)

cocopeak 发布于2019-08-26 11:58 / 1503人阅读

摘要：总结来说，低效，所以现在想将几个系统融合到一个里边，并且每次切换系统的时候保留用户的操作。我是用开发的，所以切换的地方直接用了的切换组件。

前言

公司分好几个后台模块，统一使用vue+elementUi框架开发，每一个后台模块都是多带带团队开发的。并且几个系统整体的风格、布局一样的，包括左侧边栏，上方的面包屑等
用户在使用的时候，可能要切换别的系统就要在浏览器里，新打开窗口，再输入网址，回车。
总结来说，低效，所以现在想将几个系统融合到一个里边，并且每次切换系统的时候保留用户的操作。
线上demo:http://an888.net/all/#/
github:https://github.com/Mrblackant...

效果如图：

实现思路

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实现webrtc Vue实现分页 vue.js多页面 vue+webrtc实现实时视频通话,语音通话

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107944.html

[TsAdmin]--一款基于Vue.js+Element UI的单页无刷新(无iframe)多选项

摘要：现在是不是有些期待这套全新的后台管理系统模板呢那现在就去看看的预览版本是什么样的吧欢迎大家对踊跃吐槽。同时也欢迎加入码友网的群更有其他学习资源和干货下载，欢迎入群。本文出至码友网一款基于的单页无刷新无多选项卡的后台管理系统模板前言很高兴今天在这里跟大家分享一款全新的后台管理系统UI模板--TsAdmin. TsAdmin是码友网自主开发的一款基于Vue.js+Element UI...

junnplus 2019-08-22 11:22 评论0 收藏0
Vue中对iframe实现keep alive（无刷新）

摘要：前言最近一个需求，需要在项目中加入含有的页面，同时在路由切换的过程中，要求的内容不会被刷新。的原理要实现对保持页的状态。实现的思路既然保持页里的状态很难实现，在这个时候我想到了一个别的方法。前言最近一个需求，需要在Vue项目中加入含有iframe的页面，同时在路由切换的过程中，要求iframe的内容不会被刷新。一开始使用了Vue自带的keep- alive发现没有用，于是自己研究了...

heartFollower 2019-08-02 15:38 评论0 收藏0
Vue中对iframe实现keep alive（无刷新）

摘要：前言最近一个需求，需要在项目中加入含有的页面，同时在路由切换的过程中，要求的内容不会被刷新。的原理要实现对保持页的状态。实现的思路既然保持页里的状态很难实现，在这个时候我想到了一个别的方法。前言最近一个需求，需要在Vue项目中加入含有iframe的页面，同时在路由切换的过程中，要求iframe的内容不会被刷新。一开始使用了Vue自带的keep- alive发现没有用，于是自己研究了...

k00baa 2019-08-26 10:21 评论0 收藏0
前端面试必问题答疑（2）

摘要：解决了组件之间同一状态的共享问题。当我们的应用遇到多个组件之间的共享问题时会需要状态管理核心状态管理有个核心，分别是以及。当错误出现时，我们现在也会有一个记录之前发生了什么。此外，每个实例组件仍然可以拥有和管理自己的私有状态一，css部分 1，简单介绍下css权重优先级：默认样式 .father{ width:300px; ...

wuyangchun 2019-08-02 16:16 评论0 收藏0
前端面试必问题答疑（2）

摘要：解决了组件之间同一状态的共享问题。当我们的应用遇到多个组件之间的共享问题时会需要状态管理核心状态管理有个核心，分别是以及。当错误出现时，我们现在也会有一个记录之前发生了什么。此外，每个实例组件仍然可以拥有和管理自己的私有状态一，css部分 1，简单介绍下css权重优先级：默认样式 .father{ width:300px; ...

RayKr 2019-08-05 16:55 评论0 收藏0