Vue 单页应用导航管理器，像原生app一样管理页面栈而不是销毁。
image
首先讲下为什么要完成这个插件
需求分析
由于重度使用了Vue全家桶在web App、公众号和原生Hybrid开发，所以很自然的会遇到页面跳转与回退这方面的问题。
场景举例：
- 列表页进入详情页，然后回退
- 某操作页A需要在下一页面B选择，选择后需要退回到A页面（A页面还要知道选择了什么）
- 在任意页面进入到登录页面，登录或者注册成功后返回到原页面，并且要保证继续回退是不会到登陆页面的
- 支持浏览器的
back和forward(微信或者小程序很有用) - 在进入、退出或者某些特殊页面的时候添加一些动画，比如模仿ios的默认动画（进入是页面从右向左平移，退出是页面从左向右平移）
尝试过的方法
尝试了以下方法，但是都没有达到我的预期
keep-alive
一般是使用两个router-view通过route信息和keep-alive控制页面是否缓存，这样存在两个问题：
- keep-alive对相同的页面只会存储一次，不会有两个版本的相同页面
- 两个router-view之间没有办法使用
transition等动画
CSS配合嵌套route
曾经在查看cube-ui的例子的时候，发现他们的例子好像解决了页面缓存的问题，我借鉴(copy)了他们的处理方式，升级了一下，使用CSS和嵌套route的方式实现了基本的需求。
但是也有缺点：
- 我必须严格按照页面的层级来写我的route
- 很多页面在多个地方需要用到，我必须都得把路由配上(例如商品详情页面，会在很多个地方有入口)
下面说下vue-page-stack实现的功能特性
功能特性
- 🐉在vue-router上扩展，原有导航逻辑不变
- ⚽
push或者forward的时候重新渲染页面，Stack中会添加新渲染的页面 - 🏆
back或者go(负数)的时候先前的页面不会重新渲染，而是从Stack中读取，并且这些页面保留着先前的内容状态，例如表单内容，滚动条滑动的位置等 - 🏈
back或者go(负数)的时候会把不用的页面从Stack中移除 - 🎓
replace会更新Stack中当前页面 - 🎉回退到之前页面的时候有activated钩子函数触发
- 🚀支持浏览器的后退，前进事件
- 🐰提供路由方向的变化，并且可以在前进和后退的时候添加不同的动画
在npm上已经迭代了很多个版本，除了我们内部项目已经开始正式使用外，也有很多人开始使用，并且参与了项目的改进。欢迎使用，欢迎Star，希望能帮到你。
安装和用法
安装
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 });
API
注册插件
注册的时候可以指定VuePageStack的名字和keyName
use Vue.use to install vue-page-stack
使用之前需要注册插件
Vue.use(VuePageStack, options);
// example
Vue.use(VuePageStack, { router });
Options 说明：
| 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';
}
}
相关说明
keyName
为什么会给路由添加keyName这个参数，是为了支持浏览器的后退，前进事件，这个特性在webApp,微信公众号和小程序很重要
原理
获取当前页面实例部分参考了Vue源码中keep-alive的部分
感谢
这个插件同时借鉴了vue-navigation和vue-nav，很感谢他们给的灵感。
网友评论