詳解基於vue的移動web app頁面緩衝解決方案，vueapp

詳解基於vue的移動web app頁面緩衝解決方案，vueapp

現在移動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>

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

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。