# Vue 前进刷新后退不刷新，简易页面堆栈实现

- 类似原生 APP 应用的导航体验
- push 保留当前页面，打开新页面
- back 或者 go 负数，
- 页面栈最多十层

导航默认行为类似手机 APP 的页面导航（A、B、C 为页面）：

A 前进到 B，再前进到 C；
C 返回到 B 时，B 会从缓存中恢复；
B 再次前进到 C，C 会重新生成，不会从缓存中恢复；
C 前进到 A，A 会生成，现在路由中包含 2 个 A 实例。
！重要：vue-navigation 在 url 中添加了一个 key 来区分路由。key 的名称默认为 VNK，可以修改。

本库是个导航管理器，用来模拟原生 APP 应用导航。

页面元素的垂直滚动距离 window.pageYOffset， document.documentElement.scrollTop
页面元素的垂直滚动距离 document.body.scrollTop

页面容器元素的垂直滚动距离 document.querySelector('.container').scrollTop
requestAnimationFrame

[](https://github.com/CJY0208/react-activation/blob/master/src/helpers/saveScrollPosition.js)
[vue-stack-router](https://github.com/luojilab/vue-stack-router)
[vue-page-stack](https://github.com/hezhongfeng/vue-page-stack)
[记一次 vue 的 keep-alive 踩坑之路](https://www.jianshu.com/p/cd1baf5b03b0)
Why Not Vue Router
Vue Router 是 vue 的官方路由管理，不可否认其有着强大的功能和广泛的使用，但在使用 vue-router 开发移动端业务时，有以下几点问题：

vue-router 中所有注册的路由都是单例的，当出现 PageA 跳转到 PageA 的时候，并不是产生一个新的 PageA，而是当前的 PageA 重新渲染。当需要两个 PageA ，并且两个 PageA 都需要有自己不同的状态时，这个场景用 vue-router 解决会比较麻烦。

vue-router 遵循 Web 的规范，整个路由的路径是线性的，组件实例的存活与路由无关，而是取决于是否使用了 keep-alive 组件。而在移动端，大部分栈式路由的场景，PageA 跳转到 PageB，A 和 B 实例都是存活的，当 PageB 返回 PageA，A 存活而 B 被销毁，显然 vue-router 无法满足这个场景。

开始
vue-stack-router 是一个 Vue 路由管理器的社区解决方案，针对移动端而设计，支持对页面进行栈式的管理，主要有以下功能：

栈式的路由管理
声明式的路由配置
路由 query、parameter
路由间数据传递
细粒度、可定制的路由过渡效果
安装

```
function getElementPosition (el, offset) {
  const docEl = document.documentElement
  const docRect = docEl.getBoundingClientRect()
  const elRect = el.getBoundingClientRect()
  return {
    x: elRect.left - docRect.left - offset.x,
    y: elRect.top - docRect.top - offset.y
  }
}




```