亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

cocopeak / 1911人閱讀

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

前言

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

效果如圖：

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/107944.html

相關(guān)文章

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

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

    junnplus 評(píng)論0 收藏0

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

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

    heartFollower 評(píng)論0 收藏0

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

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

    k00baa 評(píng)論0 收藏0

  • 前端面試必問(wèn)題答疑（2）

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

    wuyangchun 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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