【vue-page-stack】Vue頁面堆棧管理器

Vue頁面堆棧管理器

A vue page stack manager Vue頁面堆棧管理器 vue-page-stack

示例展現了通常的前進、後退（有activited）和replace的場景，同時還展現了同一個路由能夠存在多層的效果（輸入必要信息）

目前版本尚未通過總體業務的測試，歡迎有一樣需求的進行試用

預覽

源碼

需求分析

因爲重度使用了Vue全家桶在web App、公衆號和原生Hybrid開發，因此很天然的會遇到頁面跳轉與回退這方面的問題。

場景舉例：

1. 列表頁進入詳情頁，而後回退
2. 某操做頁A須要在下一頁面B選擇，選擇後須要退回到A頁面（A頁面還要知道選擇了什麼）
3. 在任意頁面進入到登陸頁面，登陸或者註冊成功後返回到原頁面，而且要保證繼續回退是不會到登錄頁面的
4. 支持瀏覽器的back和forward(微信或者小程序頗有用)
5. 在進入、退出或者某些特殊頁面的時候添加一些動畫，好比模仿ios的默認動畫（進入是頁面從右向左平移，退出是頁面從左向右平移）

嘗試過的方法

嘗試瞭如下方法，可是都沒有達到個人預期

keep-alive

通常是使用兩個router-view經過route信息和keep-alive控制頁面是否緩存，這樣存在兩個問題：

1. keep-alive對相同的頁面只會存儲一次，不會有兩個版本的相同頁面
2. 兩個router-view之間沒有辦法使用transition等動畫

CSS配合嵌套route

曾經在查看cube-ui的例子的時候，發現他們的例子好像解決了頁面緩存的問題，我借鑑(copy)了他們的處理方式，升級了一下，使用CSS和嵌套route的方式實現了基本的需求。 可是也有缺點：

1. 我必須嚴格按照頁面的層級來寫個人route
2. 不少頁面在多個地方須要用到，我必須都得把路由配上(例如商品詳情頁面，會在不少個地方有入口)

功能說明

1. 在vue-router上擴展，原有導航邏輯不需改變
2. push或者forward的時候從新渲染頁面，Stack中會添加新渲染的頁面
3. back或者go(負數)的時候不會從新渲染，從Stack中讀取先前的頁面，會保留好先前的內容狀態，例如表單內容，滾動條滑動的位置等
4. back或者go(負數)的時候會把不用的頁面從Stack中移除
5. replace會更新Stack中頁面信息
6. 回退到以前頁面的時候有activited鉤子函數觸發
7. 支持瀏覽器的後退，前進事件
8. 支持響應路由參數的變化，例如從 /user/foo 導航到 /user/bar，組件實例會被複用
9. 能夠在前進和後退的時候添加不一樣的動畫，也能夠在特殊頁面添加特殊的動畫

安裝和用法

安裝

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，很感謝他們給的靈感。