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