你真的了解前端路由吗？

前言：网络上，不少介绍前端路由实现的文章，以及路由原理的文章。可是最近在面试过程当中，我发现，全部面试者都能讲清楚路由的技术实现，可是却对每一种技术实现的适用场景不理解。好比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