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

1、背景：
項(xiàng)目使用的語言是vue+iview，因?yàn)橛玫搅?D，所以找公司買了3d地圖的產(chǎn)品，但是問題隨之而來。把我們項(xiàng)目需要用到的3d地圖封裝成一個(gè)組件叫3dMap.vue，方便各個(gè)頁面調(diào)用，vue的工作機(jī)制是在離開當(dāng)前頁面的時(shí)候把當(dāng)前頁面進(jìn)行銷毀，但是由于Cesium的特性，他并沒有沒銷毀，每當(dāng)訪問一次，就會(huì)重新new一個(gè)Cesium.

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

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

3.2在main.js中進(jìn)行掛載

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

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

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

3.4 單頁面應(yīng)用

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

demo1                    demo2
    demo1Menu                demo2Menu
    demo1Page1               demo2Page1
    demo1Page2               demo2Page2

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

然后，在router里面，對需要被緩存的模塊進(jìn)行設(shè)置

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

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

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