Vue 单页应用导航管理器，像原生 app 一样管理页面

何忠峰

摸鱼

[20191031更新]解决页面A->页面A的场景问题

[20190828更新]适配vue-router 3.1.x

[20190730更新]添加了获取stack的方法，在Vue原型上，只需要在页面`this.$pageStack.getStack();`

由于重度使用了 Vue 全家桶在 web App、公众号和原生 Hybrid 开发，所以很自然的会遇到页面跳转与回退这方面的问题。

场景举例：

1. 列表页进入详情页，然后回退

2. 某操作页 A 需要在下一页面 B 选择，选择后需要退回到 A 页面（ A 页面还要知道选择了什么）

3. 在任意页面进入到登录页面，登录或者注册成功后返回到原页面，并且要保证继续回退是不会到登陆页面的

4. 支持浏览器的 back 和 forward(微信或者小程序很有用)

5. 在进入、退出或者某些特殊页面的时候添加一些动画，比如模仿 ios 的默认动画（进入是页面从右向左平移，退出是页面从左向右平移）

尝试了以下方法，但是都没有达到我的预期

keep-alive

一般是使用两个 router-view 通过 route 信息和 keep-alive 控制页面是否缓存，这样存在两个问题：

keep-alive 对相同的页面只会存储一次，不会有两个版本的相同页面两个 router-view 之间没有办法使用 transition 等动画

CSS 配合嵌套 route

曾经在查看 cube-ui 的例子的时候，发现他们的例子好像解决了页面缓存的问题，我借鉴(copy)了他们的处理方式，升级了一下，使用 CSS 和嵌套 route 的方式实现了基本的需求。但是也有缺点：

我必须严格按照页面的层级来写我的 route 很多页面在多个地方需要用到，我必须都得把路由配上(例如商品详情页面，会在很多个地方有入口)

最后憋出个下面的轮子，已经在实际应用了

性能

先说一下大家最关心的性能问题，比`Vue`自带的`keep-alive`组件要好很多，因为`keep-alive`缓存一次之后在`keep-alive`组件`destroyed`之前所有的缓存是不会销毁的，但是`vue-page-stack`是根据UI层级关系进行缓存和销毁的。下面使用`vue-devtool`展示两者的不同

通过上图我们可以清楚地看见激活组件和缓存组件的状态，`vue-page-stack`将栈上的UI存储，回退的时候再拿出来激活，并且将不用的组件缓存清除；而`keep-alive`会把你激活过的所有组件都缓存下来

vue-page-stack

English | 简体中文

Vue 单页应用导航管理器，像原生 app 一样管理页面栈而不是销毁。

功能特性

在 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 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 });

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';
  }
}

example