vc-keep-alive不僅僅像App那樣前進重新整理, 返回銷燬

deepkolos發表於2018-12-17

vc-keep-alive不僅僅像App那樣前進重新整理, 返回銷燬

deepkolos.github.io/vc-keep-ali…

解決的痛點

子路由的更新和父級路由無關, 所以一級路由的快取 key 是命中路由的父一級路由相關, 目前是父路由的 path + 父子路由相同的 params

還有功能性路由的支援

    比如使用支援返回鍵的 imgsViewer, 需要 history 壓棧而不觸發 forward/backward 事件, 所以提供了 ignorePaths 引數
   比如子路由使用 router-view 來渲染, 而是使用 view-pager 來自行控制,
支援左右滑動切換, 如果 view-pager 的頁面狀態是需要儲存到 url, 則需要一級路由的一個動態路由佔位符, 充當子路由, 所以提供了 ignoreParams 引數


watch$route/activated/配置一個key不就好了麼?

watch$route/activated都是不會重建建立元件, 但是可以響應路由更新, 去重新呼叫api拉取新資料, 但是想要頁面過渡動畫就實現不了了

網上也有簡單的配置key為$route.path/fullPath, 但是有缺點:

0. 如果僅僅是命中路由的子路由部分變化了, 父路由關聯的元件也是會被重新建立, 比如: /page/tab-0 -> /page/tab-1 時, 位於/home的元件也會被重新渲染一次

1. 路由一旦快取了就只能max來觸發清除快取, 想實現返回銷燬的話, 只能通過route hook裡面 去判斷前進返回, 然後再手動呼叫instance.$destory(), 但是問題是keepAlive元件的快取依然沒有銷燬的標記, 這樣的就會導致第一次返回是銷燬了, 但是當再次前進到另一個頁面的時候, 再返回則會命中的快取是舊的快取, 然而該快取已經destoryed, 後面還是會重新建立一次 

比如: / -> /page-1/0 -> / -> /page-1/0 -> /page-1/1 -> /page-1/0(重新建立了)


所以vc-keep-alive是針對以上問題解決方案的配置打包, 不過現在還沒有對addRoutes的支援, 晚點補上


相關文章