現在移動web app越來越熱門了，許多公司開始嘗試使用angular、react、vue等MVVM框架來開發單頁架構的web app。但在開發web app時，如果希望頁面的導航體驗也接近原生應用，那一般都會遇到這兩個問題：

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：空間域名、虛擬主機、營銷軟件、網站建設、下陸網站維護、網站推廣。

• 識別前進后退行為
• 后退時恢復之前的頁面

筆者開發了一個基于vue與vue-router的導航庫vue-navigation，來幫助開發者來解決這些問題，下面是問題的解決思路。

識別前進后退

先說第一個問題。和原生app不一樣，瀏覽器中主要有這幾個限制：

• 沒有提供前進后退的事件
• 不允許開發者讀取瀏覽記錄
• 用戶可以手動輸入地址，或使用瀏覽器提供的前進后退來改變url

解決方案是自己維護一份瀏覽記錄，每次url改變時，通過與記錄的瀏覽記錄作對比，從而判斷出前進后退行為：

• url存在于瀏覽記錄中即為后退
• url不存在于瀏覽記錄中即為前進
• url在瀏覽記錄的末端即為刷新

另外，應用的路由路徑中可能允許相同的路由出現多次（例如A->B->A），所以給每個路由添加一個key值來區分相同路由的不同實例。

這個瀏覽記錄需要存儲在sessionStorage中，這樣用戶刷新后瀏覽記錄也可以恢復。

后退時恢復之前的頁面

識別出后退行為后，下一步就是像原生一樣恢復之前的頁面了。

一種方案是頁面繼續存儲在DOM中，添加樣式display: none來告訴瀏覽器不渲染該元素，但是緩存的頁面多了DOM就會變得很大，會影響頁面的性能，本文不討論這個方案。

另一種方案是將數據緩存到內存中，開發者需要將頁面的數據存儲起來，當返回到該頁面時，再根據數據將頁面恢復。但是這樣每個頁面存儲的數據不通，一般需要進行額外的編碼，如果有一種更底層的方案能解決這個問題，并且對開發者是透明的，就最好了，所以嘗試并開發了vue-navigation。

在vue-navigation 0.x版本的時候，借助了vue的keep-alive來緩存頁面，但是keep-alive是根據組件的name或tag來決定緩存的，所以帶來了很多限制。

通過拜讀keep-alive的源碼，了解到它的緩存機制后，就自己實現了一個管理緩存的組件，來靈活地緩存子組件，實現思路如下：

1. 每次render時，先取到子組件的vnode（vue的虛擬dom）
2. 計算出vnode的key，把key值賦給vnode避免vue-router復用組件實例
3. 根據key值判斷該節點是否已緩存
   1. 已緩存：將緩存的實例賦給componentInstance，這樣vue就會根據這個實例來恢復組件
   2. 未緩存：將vnode存儲到內存中，下次返回到該頁面時可以從內存中恢復

另外還需要添加一個清除緩存的邏輯，當自己維護的瀏覽記錄變化時，根據瀏覽記錄清除不需要的緩存（例如當前的路由是：A->B->C，用戶從C直接返回到了A，那么B和C都需要從緩存中刪除）。

最后

雖然是基于vue來開發的，但是思路是不變的，使用其他框架也可以做到同樣的事情。

還是安利一下vue和vue-navigation。使用插件后，再將router-view放在navigation下就有緩存功能了。

main.js

import Vue from 'vue'
import router from './router' // vue-router 實例
import Navigation from 'vue-navigation'
Vue.use(Navigation, {router})
// 啟動你的應用...

App.vue

<template>
 <navigation>
  <router-view></router-view>
 </navigation>
</template>

最后歡迎大家討論或提供更好的解決方案。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創新互聯。

當前名稱：詳解基于vue的移動webapp頁面緩存解決方案
文章轉載：http://m.newbst.com/article44/phddhe.html

成都網站建設公司_創新互聯，為您提供網站排名、品牌網站建設、網頁設計公司、企業建站、做網站、網站內鏈

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯