存在的必要性：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>