什么是Vue頁(yè)面堆棧管理器

本篇內(nèi)容主要講解“什么是Vue頁(yè)面堆棧管理器”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“什么是Vue頁(yè)面堆棧管理器”吧!

目錄

• 2、嘗試過(guò)的方法

• 2.1 keep-alive
  

• 2.2 CSS配合嵌套route

• 3、功能說(shuō)明

• 4、安裝和用法

• 5、API

• 5.1 注冊(cè)
  

• 5.2 前進(jìn)和后退

• 6、相關(guān)說(shuō)明

• 6.1 keyName

• 6.2 原理

A vue page stack manager Vue頁(yè)面堆棧管理器 vue-page-stack

示例展示了一般的前進(jìn)、后退（有activited）和replace的場(chǎng)景，同時(shí)還展示了同一個(gè)路由可以存在多層的效果（輸入必要信息）

目前版本還沒(méi)有經(jīng)過(guò)整體業(yè)務(wù)的測(cè)試，歡迎有同樣需求的進(jìn)行試用

預(yù)覽

1、需求分析

由于重度使用了Vue全家桶在web App、公眾號(hào)和原生Hybrid開(kāi)發(fā)，所以很自然的會(huì)遇到頁(yè)面跳轉(zhuǎn)與回退這方面的問(wèn)題。

場(chǎng)景舉例：

• 列表頁(yè)進(jìn)入詳情頁(yè)，然后回退

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

• 在任意頁(yè)面進(jìn)入到登錄頁(yè)面，登錄或者注冊(cè)成功后返回到原頁(yè)面，并且要保證繼續(xù)回退是不會(huì)到登陸頁(yè)面的

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

• 在進(jìn)入、退出或者某些特殊頁(yè)面的時(shí)候添加一些動(dòng)畫(huà)，比如模仿ios的默認(rèn)動(dòng)畫(huà)（進(jìn)入是頁(yè)面從右向左平移，退出是頁(yè)面從左向右平移）

2、嘗試過(guò)的方法

嘗試了以下方法，但是都沒(méi)有達(dá)到我的預(yù)期

2.1 keep-alive

一般是使用兩個(gè)router-view通過(guò)route信息和keep-alive控制頁(yè)面是否緩存，這樣存在兩個(gè)問(wèn)題：

• keep-alive對(duì)相同的頁(yè)面只會(huì)存儲(chǔ)一次，不會(huì)有兩個(gè)版本的相同頁(yè)面

• 兩個(gè)router-view之間沒(méi)有辦法使用transition等動(dòng)畫(huà)

2.2 CSS配合嵌套route

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

但是也有缺點(diǎn)：

• 我必須嚴(yán)格按照頁(yè)面的層級(jí)來(lái)寫(xiě)我的route

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

3、功能說(shuō)明

• 在vue-router上擴(kuò)展，原有導(dǎo)航邏輯不需改變

• push或者forward的時(shí)候重新渲染頁(yè)面，Stack中會(huì)添加新渲染的頁(yè)面

• back或者go(負(fù)數(shù))的時(shí)候不會(huì)重新渲染，從Stack中讀取先前的頁(yè)面，會(huì)保留好先前的內(nèi)容狀態(tài)，例如表單內(nèi)容，滾動(dòng)條滑動(dòng)的位置等

• back或者go(負(fù)數(shù))的時(shí)候會(huì)把不用的頁(yè)面從Stack中移除

• replace會(huì)更新Stack中頁(yè)面信息

• 回退到之前頁(yè)面的時(shí)候有activited鉤子函數(shù)觸發(fā)

• 支持瀏覽器的后退，前進(jìn)事件

• 支持響應(yīng)路由參數(shù)的變化，例如從 /user/foo 導(dǎo)航到 /user/bar，組件實(shí)例會(huì)被復(fù)用

• 可以在前進(jìn)和后退的時(shí)候添加不同的動(dòng)畫(huà)，也可以在特殊頁(yè)面添加特殊的動(dòng)畫(huà)

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 注冊(cè)

 注冊(cè)的時(shí)候可以指定VuePageStack的名字和keyName，一般不需要

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

5.2 前進(jìn)和后退

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

6、相關(guān)說(shuō)明

6.1 keyName

為什么會(huì)給路由添加keyName這個(gè)參數(shù)，是為了支持瀏覽器的后退，前進(jìn)事件，這個(gè)特點(diǎn)在微信公眾號(hào)和小程序很重要

6.2 原理

獲取當(dāng)前頁(yè)面Stack部分參考了keep-alive的部分

這個(gè)插件存在我心中很久了，斷斷續(xù)續(xù)做了好久，終于被我搞定了，真的非常開(kāi)心。

目前版本還沒(méi)有經(jīng)過(guò)整體業(yè)務(wù)的測(cè)試，歡迎有同樣需求的進(jìn)行試用，有任何的意見(jiàn)或者建議，歡迎在 Github 提issue和PR，感謝你的支持和貢獻(xiàn)。

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

到此，相信大家對(duì)“什么是Vue頁(yè)面堆棧管理器”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！