Vue社區的路由解決方案：vue-stack-router

vue-router 是 Vue 官方的路由管理器，用法簡單、功能強大。但在移動端場景中，特別是 hybrid 項目，咱們在使用中遇到了一些問題。

vue-router 的使用困境

咱們先理順一下客戶端路由管理器的一般特色，能夠打開手機的設置 App 感覺一下：

1. 大部分頁面都有棧的概念，好比：PageA -> PageB，這個時候 PageA 和 PageB 的實例都是存在的，只是繪製了 PageB ，當咱們從 PageB 返回 PageA 時，PageB 銷燬，PageA 展現；
2. 同一個頁面可能會有多個實例，好比： PageA -> PageA ->Page A，像是商品 A 跳轉到商品 B，其實都是商品頁面，這個時候同一個頁面會有多個實例存在；
3. 大部分頁面都支持手勢返回，好比說左滑返回。

所以在面向移動端的產品中，用戶的操做習慣、產品的設計理念也大多趨同於以上幾點。但咱們從 vue-router 的角度再來審視這幾個點，就會發下有這幾個問題：

1. vue-router 中全部註冊的路由都是單例的，當出現 PageA 跳轉到 PageA 的時候，並非產生一個新的 PageA，而是當前的 PageA 從新渲染。當須要兩個 PageA ，而且兩個 PageA 都須要有本身不一樣的狀態時，這個場景用 vue-router 解決會比較麻煩。
2. vue-router 遵循 Web 的規範，整個路由的路徑是線性的，組件實例的存活與路由無關，而是取決因而否使用了 keep-alive 組件。而在移動端，大部分棧式路由的場景，PageA 跳轉到 PageB，A 和 B 實例都是存活的，當 PageB 返回 PageA，A 存活而 B 被銷燬，顯然 vue-router 沒法知足這個場景。
3. vue-router 的路由是隻能 A 到 B ，沒有中間態，咱們沒法基於 vue-router 還原原生的左滑返回功能。

因而咱們開始在社區中尋找解決方案，但遺憾的是大多方案都是基於 vue-router 的二次開發，而且都不知足需求和有一些 Bug。所以咱們基於棧的理念開發了，針對移動端應用開發了 vue-stack-router。

vue-stack-router

先放上效果圖以及基於它實現的滑動返回。

相較於 vue-router， vue-stack-router 有如下特色：

1. 基於棧的路由管理
2. 路由間數據傳遞
3. 細粒度、可定製的路由過渡效果
4. 完善而獨立的路由導航鉤子，不須要處理組件複用的邏輯（vue-router 的 beforeRouteUpdate）
5. 支持預渲染模式

具體文檔見 vue-stack-router ， 相較於 vue-router ，vue-stack-router 的功能在一些方面依然不夠完善和強大，也但願感興趣的同窗能一塊兒來完善這個庫。放上 github 地址 github.com/luojilab/vu… ，歡迎 pr/Issues/star。

後續文章會解析整個 vue-stack-router 設計和實現過程，歡迎你們關注。