你真的了解前端路由吗？

前言：网络上，很多介绍前端路由实现的文章，以及路由原理的文章。但是最近在面试过程中，我发现，所有面试者都能讲清楚路由的技术实现，但是却对每一种技术实现的适用场景不理解。比如hash路由，很多人的回答是hash路由会带有一个#号不好看，所以用了history路由。甚至我出去面试的时候，也有一些面试官这么认为(T_T)。任何技术方案的产生都是为了解决某些特定问题的。hash和history也不例外。

目前前端路由方案主要有以下几种

• hash：可能是大多数人了解的模式，主要是基于锚点的原理实现。简单易用
• browser：即使用html5标准中的history api通过监听popstate事件来对dom进行操作。每次路由变化都会引起重定向
• memory：这种实现是在内存中维护一个堆栈用于管理访问历史的方式，比较复杂。在早起移动端使用比较多。实现麻烦，问题也较多。现在很少有使用。RN在使用这种路由模式
• static：主要用于ssr。需要后端去管理路由

前端路由解决的问题

• 根据路由变化显示不同的页面，完成页面切换
• 通过query传参

前端路由各种实现方案的对比

hash路由 优缺点

• 优点

  • 实现简单，兼容性好（兼容到ie8）
  • 绝大多数前端框架均提供了给予hash的路由实现
  • 不需要服务器端进行任何设置和开发
  • 除了资源加载和ajax请求以外，不会发起其他请求

• 缺点

  • 对于部分需要重定向的操作，后端无法获取hash部分内容，导致后台无法取得url中的数据，典型的例子就是微信公众号的oauth验证
  • 服务器端无法准确跟踪前端路由信息
  • 对于需要锚点功能的需求会与目前路由机制冲突

browser路由 优缺点

• 优点

  • 对于重定向过程中不会丢失url中的参数。后端可以拿到这部分数据
  • 绝大多数前段框架均提供了browser的路由实现
  • 后端可以准确跟踪路由信息
  • 可以使用history.state来获取当前url对应的状态信息

• 缺点

  • 兼容性不如hash路由(只兼容到IE10)
  • 需要后端支持，每次返回html文档

memory路由 优缺点

• 优点

  • 不存在兼容性问题，路由保存在内存中
  • 不需要服务器端提供支持

• 缺点

  • 目前很少有前端路由模块提供对memory路由的实现(react-router提供了memory实现)
  • 自己实现难度较大，且工作量也很大
  • 对于前进后退操作的路由管理非常麻烦，尤其是android设备的backbutton

static路由 优缺点（该路由方式主要用于ssr。不做比较。）

如何选择合适的前端路由方案？以下建议作为参考：

hash模式适用场景：

• 兼容IE8
• 没有重定向传参需求(第三方认证oauth)
• 没有锚点跳跃需求
• 后端不需要跟踪前端路由信息
• hybrid app需要将前端资源打包在应用内，因为html的域在file://下，所以不能发生重定向

history模式适用场景：

• 页面内锚点需求
• 需要重定向传参
• 同构直出
• 后端跟踪路由信息
• 附加路由信息(history.state)获取路由状态

memory模式适用场景：

• ie8以下兼容
• React Native