Vue社区的路由解决方案:vue-stack-router

6,446 阅读3分钟

vue-router 是 Vue 官方的路由管理器,用法简单、功能强大。但在移动端场景中,特别是 hybrid 项目,我们在使用中遇到了一些问题。

vue-router 的使用困境

我们先理顺一下客户端路由管理器的通常特点,可以打开手机的设置 App 感受一下:

  1. 大部分页面都有栈的概念,比如:PageA -> PageB,这个时候 PageA 和 PageB 的实例都是存在的,只是绘制了 PageB ,当我们从 PageB 返回 PageA 时,PageB 销毁,PageA 展示;
  2. 同一个页面可能会有多个实例,比如: PageA -> PageA ->Page A,像是商品 A 跳转到商品 B,其实都是商品页面,这个时候同一个页面会有多个实例存在;
  3. 大部分页面都支持手势返回,比如说左滑返回。

因此在面向移动端的产品中,用户的操作习惯、产品的设计理念也大多趋同于以上几点。但我们从 vue-router 的角度再来审视这几个点,就会发下有这几个问题:

  1. vue-router 中所有注册的路由都是单例的,当出现 PageA 跳转到 PageA 的时候,并不是产生一个新的 PageA,而是当前的 PageA 重新渲染。当需要两个 PageA ,并且两个 PageA 都需要有自己不同的状态时,这个场景用 vue-router 解决会比较麻烦。
  2. vue-router 遵循 Web 的规范,整个路由的路径是线性的,组件实例的存活与路由无关,而是取决于是否使用了 keep-alive 组件。而在移动端,大部分栈式路由的场景,PageA 跳转到 PageB,A 和 B 实例都是存活的,当 PageB 返回 PageA,A 存活而 B 被销毁,显然 vue-router 无法满足这个场景。
  3. vue-router 的路由是只能 A 到 B ,没有中间态,我们无法基于 vue-router 还原原生的左滑返回功能。

于是我们开始在社区中寻找解决方案,但遗憾的是大多方案都是基于 vue-router 的二次开发,并且都不满足需求和有一些 Bug。因此我们基于栈的理念开发了,针对移动端应用开发了 vue-stack-router

vue-stack-router

先放上效果图以及基于它实现的滑动返回。

相较于 vue-routervue-stack-router 有以下特点:

  1. 基于栈的路由管理
  2. 路由间数据传递
  3. 细粒度、可定制的路由过渡效果
  4. 完善而独立的路由导航钩子,不需要处理组件复用的逻辑(vue-router 的 beforeRouteUpdate
  5. 支持预渲染模式

具体文档见 vue-stack-router , 相较于 vue-routervue-stack-router 的功能在一些方面依然不够完善和强大,也希望感兴趣的同学能一起来完善这个库。放上 github 地址 github.com/luojilab/vu… ,欢迎 pr/Issues/star。

后续文章会解析整个 vue-stack-router 设计和实现过程,欢迎大家关注。