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

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-router， vue-stack-router 有如下特色：

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

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

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