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的支持, 晚點補上