成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

cocopeak / 1770人閱讀

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

前言

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

效果如圖：

實(shí)現(xiàn)思路

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

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

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

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

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

相關(guān)文章

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

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

    junnplus 評論0 收藏0

  • Vue中對iframe實(shí)現(xiàn)keep alive（無刷新）

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

    heartFollower 評論0 收藏0

  • Vue中對iframe實(shí)現(xiàn)keep alive（無刷新）

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

    k00baa 評論0 收藏0

  • 前端面試必問題答疑（2）

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

    wuyangchun 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<