摘要：解決思路既然每訪問一次就會一個，那能不能就創造一個全局的，讓他一直存在，通過顯示與隱藏去控制在每個單頁面應用中的顯示呢。

1、背景：
項目使用的語言是vue+iview，因為用到了3D，所以找公司買了3d地圖的產品，但是問題隨之而來。把我們項目需要用到的3d地圖封裝成一個組件叫3dMap.vue，方便各個頁面調用，vue的工作機制是在離開當前頁面的時候把當前頁面進行銷毀，但是由于Cesium的特性，他并沒有沒銷毀，每當訪問一次，就會重新new一個Cesium.

const Viewer = new Cesium.Viewer("newID", {
    navigation: this.navigation,
    infoBox: this.infoBox
});

查看計算機進程會發現，chrome瀏覽器會同事跑6個以上進程，其中一個是Cesium的，它所占用的內存會隨著訪問次數的增加不斷上漲。
2、解決思路：
既然每訪問一次3dMap.vue就會new一個Cesium，那能不能就創造一個全局的Cesium，讓他一直存在，通過顯示與隱藏去控制在每個單頁面應用中的顯示呢。
3、動手：
·3.1首先創建一個全局的Cesium，起名global3D.vue,這個只是用來初始化

3.2在main.js中進行掛載

import global_ from "./components/global3D"
Vue.prototype.GLOBAL = global_

3.3 創建一個3DViewer.vue，用來接收全局的Cesium,這個文件中可以寫一些設置相機視角，獲取經緯度啊等等方法，

export default {
    data() {
        return {
            //接收全局的Viewer，這個Viewer是Cesium new 出來的
            viewer: this.GLOBAL.Viewer,
            scene: this.GLOBAL.Viewer.scene
        };
    },
 }

3.4 單頁面應用

3.4 如果你的3d只是應用在不同的模塊中，且這些模塊之間沒有共同的組件，如下圖，在demo1模塊中，demo1Page1和demo1Page2共同使用demo1Menu，且只有demo1Page1頁面使用3d組件，demo2同，那么到3.3，就可以完美的解決這個問題，但是，如果你的3d是應該在同一個模塊，且有共同的組件，那么在不同頁面之間跳轉的時候就會出現問題。比如，在demo1模塊中，demo1Page1和demo1Page2共同使用demo1Menu，且demo1Page1頁面和demo1Page2頁面都使用了3d組件，demo2同，那么在由demo1里面的頁面跳向demo2里面的頁面的時候，3d就會丟失了

demo1                    demo2
    demo1Menu                demo2Menu
    demo1Page1               demo2Page1
    demo1Page2               demo2Page2

3.5 解決
解決這個問題主要是使用的vue的keep-Alive，
首先，在App.vue中，做判斷，如果使用了keep-Alive,則走第一個，否則的話，走第二個

然后，在router里面，對需要被緩存的模塊進行設置

           {
                path: "homePage",
                component: UMPatrolHomePage,
                name: "UMPatrolHomePage",
                meta: {
                    keepAlive: true //需要被緩存
                }
            }

最后，在單頁面中寫入如下，to是要去的那個頁面的路徑，from是從哪個頁面來的那個路徑，next()必須執行，否則跳轉會被攔截，如果要去的頁面或者from的頁面使用了3d，則這個頁面需要被緩存，即keep.Alive=true,成功緩存后，然后執行銷毀操作，這樣在不同頁面之間切換的時候，就不會出現3d丟失的情況。原理感興趣的同學可以自行搜索，網上有很多詳細解說的文章

beforeRouteLeave(to, from, next) {
    if (
        to.name == "UMPatrolHomePage" ||
        to.name == "UMDetailEquipment" ||
        to.name == "虛擬巡檢" ||
        to.name == "人員定位詳情" ||
        to.name == "管廊安防監控列表" ||
        to.name == "管廊環境監控列表" ||
        from.name == "人員定位詳情" ||
        from.name == "虛擬巡檢" ||
        from.name == "UMDetailEquipment" ||
        from.name == "UMPatrolHomePage" ||
        from.name == "管廊安防監控列表" ||
        from.name == "管廊環境監控列表"
    ) {
        from.meta.keepAlive = true;
        to.meta.keepAlive = true;
        this.$destroy();
        next();
    } else {
        from.meta.keepAlive = false;
        to.meta.keepAlive = false;
        this.$destroy();
        next();
    }
},