页面栈.md 2.7 KB

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 vue-page-stack 记一次 vue 的 keep-alive 踩坑之路 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
  }
}