Vue 單頁應用導航管理器，像原生app一樣管理頁面棧而不是銷毀。
image
首先講下為什么要完成這個插件
需求分析
由于重度使用了Vue全家桶在web App、公眾號和原生Hybrid開發(fā)，所以很自然的會遇到頁面跳轉與回退這方面的問題。
場景舉例：
- 列表頁進入詳情頁，然后回退
- 某操作頁A需要在下一頁面B選擇，選擇后需要退回到A頁面（A頁面還要知道選擇了什么）
- 在任意頁面進入到登錄頁面，登錄或者注冊成功后返回到原頁面，并且要保證繼續(xù)回退是不會到登陸頁面的
- 支持瀏覽器的
back和forward(微信或者小程序很有用) - 在進入、退出或者某些特殊頁面的時候添加一些動畫，比如模仿ios的默認動畫（進入是頁面從右向左平移，退出是頁面從左向右平移）
嘗試過的方法
嘗試了以下方法，但是都沒有達到我的預期
keep-alive
一般是使用兩個router-view通過route信息和keep-alive控制頁面是否緩存，這樣存在兩個問題：
- keep-alive對相同的頁面只會存儲一次，不會有兩個版本的相同頁面
- 兩個router-view之間沒有辦法使用
transition等動畫
CSS配合嵌套route
曾經(jīng)在查看cube-ui的例子的時候，發(fā)現(xiàn)他們的例子好像解決了頁面緩存的問題，我借鑒(copy)了他們的處理方式，升級了一下，使用CSS和嵌套route的方式實現(xiàn)了基本的需求。
但是也有缺點：
- 我必須嚴格按照頁面的層級來寫我的route
- 很多頁面在多個地方需要用到，我必須都得把路由配上(例如商品詳情頁面，會在很多個地方有入口)
下面說下vue-page-stack實現(xiàn)的功能特性
功能特性
- ??在vue-router上擴展，原有導航邏輯不變
- ?
push或者forward的時候重新渲染頁面，Stack中會添加新渲染的頁面 - ??
back或者go(負數(shù))的時候先前的頁面不會重新渲染，而是從Stack中讀取，并且這些頁面保留著先前的內容狀態(tài)，例如表單內容，滾動條滑動的位置等 - ??
back或者go(負數(shù))的時候會把不用的頁面從Stack中移除 - ??
replace會更新Stack中當前頁面 - ??回退到之前頁面的時候有activated鉤子函數(shù)觸發(fā)
- ??支持瀏覽器的后退，前進事件
- ??提供路由方向的變化，并且可以在前進和后退的時候添加不同的動畫
在npm上已經(jīng)迭代了很多個版本，除了我們內部項目已經(jīng)開始正式使用外，也有很多人開始使用，并且參與了項目的改進。歡迎使用，歡迎Star，希望能幫到你。
安裝和用法
安裝
npm install vue-page-stack
# OR
yarn add vue-page-stack
使用
import Vue from 'vue'
import VuePageStack from 'vue-page-stack';
// vue-router is necessary
Vue.use(VuePageStack, { router });
// App.vue
<template>
<div id="app">
<vue-page-stack>
<router-view ></router-view>
</vue-page-stack>
</div>
</template>
CDN
<script src="https://unpkg.com/vue-page-stack/dist/vue-page-stack.js"></script>
Vue.use(VuePageStack.default, { router });
API
注冊插件
注冊的時候可以指定VuePageStack的名字和keyName
use Vue.use to install vue-page-stack
使用之前需要注冊插件
Vue.use(VuePageStack, options);
// example
Vue.use(VuePageStack, { router });
Options 說明：
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| router | vue-router instance | Object | vue-router instance | - |
| name | VuePageStack name | String | 'VuePageStack' | 'VuePageStack' |
| keyName | stack-key name | String | 'stack-key' | 'stack-key' |
注冊的時候可以指定VuePageStack的名字和keyName
Vue.use(VuePageStack, { router, name: 'VuePageStack', keyName: 'stack-key' });
前進和后退
如果想在頁面前進或者后退的時候添加一些動畫，可以通過stack-key-dir進行判斷
// App.vue
$route(to, from) {
if (to.params['stack-key-dir'] === 'forward') {
this.transitionName = 'forward';
} else {
this.transitionName = 'back';
}
}
相關說明
keyName
為什么會給路由添加keyName這個參數(shù)，是為了支持瀏覽器的后退，前進事件，這個特性在webApp,微信公眾號和小程序很重要
原理
獲取當前頁面實例部分參考了Vue源碼中keep-alive的部分
感謝
這個插件同時借鑒了vue-navigation和vue-nav，很感謝他們給的靈感。
