前言
公司分好幾www.cppcns.com個後台模組，統一使用vue+elementui框架開發，每乙個後台模組都是單獨團隊開發的。並且幾個系統整體的風格、布局一樣的，包括左側邊欄，上方的麵包屑等
使用者在使用的時候，可能要切換別的系統就要在瀏覽器裡，新開啟視窗，再輸入**，回車。
總結來說，低效，所以現在想將幾個系統融合到乙個裡邊，並且每次切換系統的時候保留使用者的操作。
效果如圖：
實現思路
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
&l程式設計客棧t;/iframe>
本文標題: vue多系統切換實現方案
本文位址: /ruanjian/j**a/229549.html
Vue 實現tab切換
v bind 三元 v for item,index in tabs class click tab index 先使用v for把資料遍歷渲染到頁面上，v for中有乙個index表示索引，將index作為引數傳入到tab index 這個函式中，在data中定義乙個num變數，在title中如果...
mui多頁面切換實現
方法一 但是此處有乙個關鍵點 必須 設定 tab 卡中href 頁面 id 屬性值 下。原理錨點 演示 方法 2 將每個頁面內容用 html 頁存放，用 js 將每個頁面鑲嵌到主頁面中。先將所有頁面隱藏再顯示出主頁面。記住此處要把 tab 中 href 位址改為你的子頁得位址，刪除子頁得mui co...
vue實現路由切換改變title
由於vue專案通常是單頁應用，因此在入口檔案index.html只有乙個title，單頁所展示的若干頁面只是隨著路由的切換而在同乙個index.html上不同的渲染而已，因此此時的title屬性是不會隨著頁面的切換而變更的 那麼想實現路由切換title變換可以通過vue router的導航守衛來實現...