什么是Vue頁面堆棧管理器

本篇內容主要講解“什么是Vue頁面堆棧管理器”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“什么是Vue頁面堆棧管理器”吧!

目錄

• 2、嘗試過的方法

• 2.1 keep-alive
  

• 2.2 CSS配合嵌套route

• 3、功能說明

• 4、安裝和用法

• 5、API

• 5.1 注冊
  

• 5.2 前進和后退

• 6、相關說明

• 6.1 keyName

• 6.2 原理

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

示例展示了一般的前進、后退（有activited）和replace的場景，同時還展示了同一個路由可以存在多層的效果（輸入必要信息）

目前版本還沒有經過整體業務的測試，歡迎有同樣需求的進行試用

預覽

1、需求分析

由于重度使用了Vue全家桶在web App、公眾號和原生Hybrid開發，所以很自然的會遇到頁面跳轉與回退這方面的問題。

場景舉例：

• 列表頁進入詳情頁，然后回退

• 某操作頁A需要在下一頁面B選擇，選擇后需要退回到A頁面（A頁面還要知道選擇了什么）

• 在任意頁面進入到登錄頁面，登錄或者注冊成功后返回到原頁面，并且要保證繼續回退是不會到登陸頁面的

• 支持瀏覽器的back和forward(微信或者小程序很有用)

• 在進入、退出或者某些特殊頁面的時候添加一些動畫，比如模仿ios的默認動畫（進入是頁面從右向左平移，退出是頁面從左向右平移）

2、嘗試過的方法

嘗試了以下方法，但是都沒有達到我的預期

2.1 keep-alive

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

• keep-alive對相同的頁面只會存儲一次，不會有兩個版本的相同頁面

• 兩個router-view之間沒有辦法使用transition等動畫

2.2 CSS配合嵌套route

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

但是也有缺點：

• 我必須嚴格按照頁面的層級來寫我的route

• 很多頁面在多個地方需要用到，我必須都得把路由配上(例如商品詳情頁面，會在很多個地方有入口)

3、功能說明

• 在vue-router上擴展，原有導航邏輯不需改變

• push或者forward的時候重新渲染頁面，Stack中會添加新渲染的頁面

• back或者go(負數)的時候不會重新渲染，從Stack中讀取先前的頁面，會保留好先前的內容狀態，例如表單內容，滾動條滑動的位置等

• back或者go(負數)的時候會把不用的頁面從Stack中移除

• replace會更新Stack中頁面信息

• 回退到之前頁面的時候有activited鉤子函數觸發

• 支持瀏覽器的后退，前進事件

• 支持響應路由參數的變化，例如從 /user/foo 導航到 /user/bar，組件實例會被復用

• 可以在前進和后退的時候添加不同的動畫，也可以在特殊頁面添加特殊的動畫

4、安裝和用法

安裝：

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>

5、API

5.1 注冊

 注冊的時候可以指定VuePageStack的名字和keyName，一般不需要

Vue.use(VuePageStack, { router, name: 'VuePageStack', keyName: 'stack-key' });

5.2 前進和后退

想在前進、后退或者特殊路由添加一些動畫，可以在router-view的頁面通過watch $route，通過stack-key-dir(自定義keyName這里也隨之變化)參數判斷此時的方向，可以參考實例

6、相關說明

6.1 keyName

為什么會給路由添加keyName這個參數，是為了支持瀏覽器的后退，前進事件，這個特點在微信公眾號和小程序很重要

6.2 原理

獲取當前頁面Stack部分參考了keep-alive的部分

這個插件存在我心中很久了，斷斷續續做了好久，終于被我搞定了，真的非常開心。

目前版本還沒有經過整體業務的測試，歡迎有同樣需求的進行試用，有任何的意見或者建議，歡迎在 Github 提issue和PR，感謝你的支持和貢獻。

這個插件同時借鑒了vue-navigation和vue-nav，很感謝他們給的靈感。

到此，相信大家對“什么是Vue頁面堆棧管理器”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！