存在的必要性：mpvue開發微信小程式，在頁面跳轉到新頁面的過程中會有200ms左右的延遲，這個200ms如果用來請求新頁面的介面，那麼跳轉到新頁面或許已經渲染好了頁面。

就是兩種方式：

1.新頁面跳轉之前，就請求新頁面資料。

2.跳轉到新頁面後，再請求資料，可能還會有一個loading的狀態。

第二種方式是正常的的頁面跳轉，不say了。

這裡講解的都是第一種方式：

　　從上面結構圖可以看出系統跳轉的延時時間可以用來請求新資料，大大提高了使用者體驗性。

　　方案是有了，該怎麼實現呢。

　　我們知道mpvue的生命週期有onLoad mounted onShow 等。

　　我們自建一個preLoad生命週期進行頁面預載入邏輯處理。

　　是不是有個疑問，怎麼讓程式執行我們的這個preLoad生命週期呢？

　　　講解一下vue的執行機制：

　　　　mpvue建立每個頁面都會有個main.js檔案，執行了app = new Vue(app);在專案初始化時，都會先被執行，push到一個數組裡，這就是小程式頁面堆疊的原理了。

　　　　　原先的頁面跳轉，會執行這個App中的生命週期函式。找到一點靈感有沒有，我們可以在初始化時，對這個 App from './index' 的App物件進行全域性儲存。在跳轉時同時對執行App中preLoad函式進行呼叫，而小程式正常執行App生命週期，

　　　　　當preLoad執行完後把資料傳給App return 中的這個物件，就實現了渲染更新。

export default{
  data(){
    return {}   //把資料傳到這個物件上
    }      
}    

　 上程式碼：

　　兩個頁面，展示從joy-material 跳轉到home的過程

　　global.js   

let $navs = {  //作用收集每個頁面的例項App；
};
let $router =(path,className)=>{    //每個頁面例項都會有個name欄位，進行$navs匹配

setTimeout(()=>{
    wx.navigateTo({
      url:path
    });
  },150);

 $navs[className].preLoad();   //匹配到新頁面的例項，呼叫preLoad函式，不影響正常跳轉。
  
};
export default {
  $navs:$navs,
  $router:$router
};

　　joy-material index.vue

<template>
  <div class="joy-content">
    <h4 class="normal-style" hover-stay-time="100"  @tap="to">{{name}}</h4>
  </div>
</template>

<script>
  import pre from "@/utils/global"
  let m = {
    name:"material",
    data(){
      return {
        name:"大蘋果"
      }
    },
    mounted(){
      
    },
    methods :{
      to(){
        pre.$router("/pages/home/main","home");  //第二個引數是這個新頁面name欄位值,用來從$navs從匹配此例項。
      }
    }
  };
    pre.$navs[m.name] = m;  //把例項儲存到全域性$navs中；
    export default m;
</script>

<style scoped lang="scss">

</style>

　　home index.vue

<template>
    <div>{{info}}</div>
</template>

<script>
  import pre from "@/utils/global"
  let data = {
    info:"1111"
  }
  let h = {
    name:"home",
    data(){
      return data;
    },
    mounted(){
      
    },
    preLoad(){
      data.info = "pppppp";
    }
  };
    pre.$navs[h.name] = h;
    export default h;
</script>

<style scoped>

</style>