vue-router 是 Vue 官方的路由管理器,用法简单、功能强大。但在移动端场景中,特别是 hybrid 项目,我们在使用中遇到了一些问题。
vue-router 的使用困境
我们先理顺一下客户端路由管理器的通常特点,可以打开手机的设置 App 感受一下:
- 大部分页面都有栈的概念,比如:PageA -> PageB,这个时候 PageA 和 PageB 的实例都是存在的,只是绘制了 PageB ,当我们从 PageB 返回 PageA 时,PageB 销毁,PageA 展示;
- 同一个页面可能会有多个实例,比如: PageA -> PageA ->Page A,像是商品 A 跳转到商品 B,其实都是商品页面,这个时候同一个页面会有多个实例存在;
- 大部分页面都支持手势返回,比如说左滑返回。
因此在面向移动端的产品中,用户的操作习惯、产品的设计理念也大多趋同于以上几点。但我们从 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-router 的路由是只能 A 到 B ,没有中间态,我们无法基于 vue-router 还原原生的左滑返回功能。
于是我们开始在社区中寻找解决方案,但遗憾的是大多方案都是基于 vue-router
的二次开发,并且都不满足需求和有一些 Bug。因此我们基于栈的理念开发了,针对移动端应用开发了 vue-stack-router
。
vue-stack-router
先放上效果图以及基于它实现的滑动返回。
![c3f632ad995bb4e2ffc48e602253160d.gif](https://i-blog.csdnimg.cn/blog_migrate/66c17cda5093cd65f8829fa286d209c0.gif)
相较于 vue-router
, vue-stack-router
有以下特点:
- 基于栈的路由管理
- 路由间数据传递
- 细粒度、可定制的路由过渡效果
- 完善而独立的路由导航钩子,不需要处理组件复用的逻辑(vue-router 的
beforeRouteUpdate
) - 支持预渲染模式
具体文档见 vue-stack-router , 相较于 vue-router
,vue-stack-router
的功能在一些方面依然不够完善和强大,也希望感兴趣的同学能一起来完善这个库。放上 github 地址 https://github.com/luojilab/vue-stack-router,欢迎 pr/Issues/star。
后续文章会解析整个 vue-stack-router
设计和实现过程,欢迎大家关注。