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

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

相较于 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 设计和实现过程，欢迎大家关注。