Vue頁面堆棧管理器
A vue page stack manager Vue頁面堆棧管理器 vue-page-stack
示例展示了一般的前進、後退(有activited)和replace的場景,同時還展示了同一個路由可以存在多層的效果(輸入必要信息)
目前版本還沒有經過整體業務的測試,歡迎有同樣需求的進行試用
需求分析
由於重度使用了Vue全家桶在web App
、公衆號和原生Hybrid開發,所以很自然的會遇到頁面跳轉與回退這方面的問題。
場景舉例:
- 列表頁進入詳情頁,然後回退
- 某操作頁A需要在下一頁面B選擇,選擇後需要退回到A頁面(A頁面還要知道選擇了什麼)
- 在任意頁面進入到登錄頁面,登錄或者註冊成功後返回到原頁面,並且要保證繼續回退是不會到登陸頁面的
- 支持瀏覽器的
back
和forward
(微信或者小程序很有用) - 在進入、退出或者某些特殊頁面的時候添加一些動畫,比如模仿ios的默認動畫(進入是頁面從右向左平移,退出是頁面從左向右平移)
嘗試過的方法
嘗試了以下方法,但是都沒有達到我的預期
keep-alive
一般是使用兩個router-view
通過route信息和keep-alive控制頁面是否緩存,這樣存在兩個問題:
- keep-alive對相同的頁面只會存儲一次,不會有兩個版本的相同頁面
- 兩個router-view之間沒有辦法使用
transition
等動畫
CSS配合嵌套route
曾經在查看cube-ui
的例子的時候,發現他們的例子好像解決了頁面緩存的問題,我借鑑(copy)了他們的處理方式,升級了一下,使用CSS和嵌套route的方式實現了基本的需求。
但是也有缺點:
- 我必須嚴格按照頁面的層級來寫我的route
- 很多頁面在多個地方需要用到,我必須都得把路由配上(例如商品詳情頁面,會在很多個地方有入口)
功能說明
- 在vue-router上擴展,原有導航邏輯不需改變
-
push
或者forward
的時候重新渲染頁面,Stack中會添加新渲染的頁面 -
back
或者go(負數)
的時候不會重新渲染,從Stack中讀取先前的頁面,會保留好先前的內容狀態,例如表單內容,滾動條滑動的位置等 -
back
或者go(負數)
的時候會把不用的頁面從Stack中移除 -
replace
會更新Stack中頁面信息 - 回退到之前頁面的時候有activited鉤子函數觸發
- 支持瀏覽器的後退,前進事件
- 支持響應路由參數的變化,例如從 /user/foo 導航到 /user/bar,組件實例會被複用
- 可以在前進和後退的時候添加不同的動畫,也可以在特殊頁面添加特殊的動畫
安裝和用法
安裝
npm install vue-page-stack
# OR
yarn add vue-page-stack
使用
import Vue from 'vue'
import VuePageStack from 'vue-page-stack';
// vue-router是必須的
Vue.use(VuePageStack, { router });
// App.vue
<template>
<div id="app">
<vue-page-stack>
<router-view ></router-view>
</vue-page-stack>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
};
},
components: {},
created() {},
methods: {}
};
</script>
API
註冊
註冊的時候可以指定VuePageStack的名字和keyName,一般不需要
Vue.use(VuePageStack, { router, name: 'VuePageStack', keyName: 'stack-key' });
前進和後退
想在前進、後退或者特殊路由添加一些動畫,可以在router-view
的頁面通過watch $route
,通過stack-key-dir(自定義keyName這裏也隨之變化)
參數判斷此時的方向,可以參考實例
相關說明
keyName
爲什麼會給路由添加keyName
這個參數,是爲了支持瀏覽器的後退,前進事件,這個特點在微信公衆號和小程序很重要
原理
獲取當前頁面Stack部分參考了keep-alive的部分
結束語
念念不忘,必有迴響
這個插件存在我心中很久了,斷斷續續做了好久,終於被我搞定了,真的非常開心。
目前版本還沒有經過整體業務的測試,歡迎有同樣需求的進行試用,有任何的意見或者建議,歡迎在 Github 提issue和PR,感謝你的支持和貢獻。
這個插件同時借鑑了vue-navigation和vue-nav,很感謝他們給的靈感。