Vue 多系統(tǒng)切換實現(xiàn)方案(iframe嵌套的兩三事)

cocopeak 發(fā)布于2019-08-26 11:58 / 1757人閱讀

摘要：總結(jié)來說，低效，所以現(xiàn)在想將幾個系統(tǒng)融合到一個里邊，并且每次切換系統(tǒng)的時候保留用戶的操作。我是用開發(fā)的，所以切換的地方直接用了的切換組件。

前言

公司分好幾個后臺模塊，統(tǒng)一使用vue+elementUi框架開發(fā)，每一個后臺模塊都是多帶帶團隊開發(fā)的。并且幾個系統(tǒng)整體的風格、布局一樣的，包括左側(cè)邊欄，上方的面包屑等
用戶在使用的時候，可能要切換別的系統(tǒng)就要在瀏覽器里，新打開窗口，再輸入網(wǎng)址，回車。
總結(jié)來說，低效，所以現(xiàn)在想將幾個系統(tǒng)融合到一個里邊，并且每次切換系統(tǒng)的時候保留用戶的操作。
線上demo:http://an888.net/all/#/
github:https://github.com/Mrblackant...

效果如圖：

實現(xiàn)思路

1.結(jié)合iframe開發(fā)上方系統(tǒng)切換的組件
2.各個子系統(tǒng)有自己的域名

開發(fā)

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

代碼

app.vue

前端小學生，歡迎大家來指正、交流

云服務器 GPU云服務器 VUE實現(xiàn)webrtc Vue實現(xiàn)分頁 vue.js多頁面 vue+webrtc實現(xiàn)實時視頻通話,語音通話

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/107944.html

[TsAdmin]--一款基于Vue.js+Element UI的單頁無刷新(無iframe)多選項

摘要：現(xiàn)在是不是有些期待這套全新的后臺管理系統(tǒng)模板呢那現(xiàn)在就去看看的預覽版本是什么樣的吧歡迎大家對踴躍吐槽。同時也歡迎加入碼友網(wǎng)的群更有其他學習資源和干貨下載，歡迎入群。本文出至碼友網(wǎng)一款基于的單頁無刷新無多選項卡的后臺管理系統(tǒng)模板前言很高興今天在這里跟大家分享一款全新的后臺管理系統(tǒng)UI模板--TsAdmin. TsAdmin是碼友網(wǎng)自主開發(fā)的一款基于Vue.js+Element UI...

junnplus 2019-08-22 11:22 評論0 收藏0
Vue中對iframe實現(xiàn)keep alive（無刷新）

摘要：前言最近一個需求，需要在項目中加入含有的頁面，同時在路由切換的過程中，要求的內(nèi)容不會被刷新。的原理要實現(xiàn)對保持頁的狀態(tài)。實現(xiàn)的思路既然保持頁里的狀態(tài)很難實現(xiàn)，在這個時候我想到了一個別的方法。前言最近一個需求，需要在Vue項目中加入含有iframe的頁面，同時在路由切換的過程中，要求iframe的內(nèi)容不會被刷新。一開始使用了Vue自帶的keep- alive發(fā)現(xiàn)沒有用，于是自己研究了...

heartFollower 2019-08-02 15:38 評論0 收藏0
Vue中對iframe實現(xiàn)keep alive（無刷新）

摘要：前言最近一個需求，需要在項目中加入含有的頁面，同時在路由切換的過程中，要求的內(nèi)容不會被刷新。的原理要實現(xiàn)對保持頁的狀態(tài)。實現(xiàn)的思路既然保持頁里的狀態(tài)很難實現(xiàn)，在這個時候我想到了一個別的方法。前言最近一個需求，需要在Vue項目中加入含有iframe的頁面，同時在路由切換的過程中，要求iframe的內(nèi)容不會被刷新。一開始使用了Vue自帶的keep- alive發(fā)現(xiàn)沒有用，于是自己研究了...

k00baa 2019-08-26 10:21 評論0 收藏0
前端面試必問題答疑（2）

摘要：解決了組件之間同一狀態(tài)的共享問題。當我們的應用遇到多個組件之間的共享問題時會需要狀態(tài)管理核心狀態(tài)管理有個核心，分別是以及。當錯誤出現(xiàn)時，我們現(xiàn)在也會有一個記錄之前發(fā)生了什么。此外，每個實例組件仍然可以擁有和管理自己的私有狀態(tài) 一，css部分 1，簡單介紹下css權重優(yōu)先級：默認樣式 .father{ width:300px; ...

wuyangchun 2019-08-02 16:16 評論0 收藏0