乐趣区

vuepagestackVue页面堆栈管理器

jiezi

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，很感谢他们给的灵感。

退出移动版