一文读懂前端路由模式的各种区别

路由


路由:通过不同的url地址展示不同的内容或者页面

目前路由分类两类:

  1. 后端路由
  2. 前端路由

后端路由


使用模板引擎,通过服务端渲染,直接返回相应的页面。

大致过程:

  1. 浏览器发出请求
  2. 服务器监听到80端口(或443)有请求过来,并解析url路径
  3. 根据服务器的路由配置,返回相应资源信息(可以是 html 字串,也可以是 json 数据,图片等)
  4. 浏览器根据数据包的Content-Type来决定如何解析数据

前端路由


  1. 使用iframe进行嵌套,不改变主体url的情况下,加载不同的前端页面
  2. AngularJS的MVVM框架,让前后端彻底分离,使前端可以独立开发大型应用程序。
  3. 随后react、vue出现带动了前端热潮,导致前端路由也变得更加独立。

前端路由实现方式


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

前端路由解决的问题


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

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


hash路由

  • 优点
  1. 实现简单,兼容性好(兼容到ie8)
  2. 绝大多数前端框架均提供了给予hash的路由实现
  3. 不需要服务器端进行任何设置和开发
  4. 除了资源加载和ajax请求以外,不会发起其他请求
  • 缺点
  1. 对于部分需要重定向的操作,后端无法获取hash部分内容,导致后台无法取得url中的数据,典型的例子就是微信公众号的oauth验证
  2. 服务器端无法准确跟踪前端路由信息
  3. 对于需要锚点功能的需求会与目前路由机制冲突

History(browser)路由

  • 优点
  1. 对于重定向过程中不会丢失url中的参数。后端可以拿到这部分数据
  2. 绝大多数前段框架均提供了browser的路由实现
  3. 后端可以准确跟踪路由信息
  4. 可以使用history.state来获取当前url对应的状态信息
  • 缺点
  1. 兼容性不如hash路由(只兼容到IE10)
  2. 要后端支持,每次返回html文档

memory路由

  • 优点
  1. 不存在兼容性问题,路由保存在内存中
  2. 不需要服务器端提供支持
  • 缺点
  1. 前很少有前端路由模块提供对memory路由的实现(react-router提供了memory实现)
  2. 自己实现难度较大,且工作量也很大
  3. 对于前进后退操作的路由管理非常麻烦,尤其是android设备的backbutton

选择合适的前端路由方案


hash模式适用场景

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

history模式适用场景

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

memory模式适用场景

  • ie8以下兼容
  • React Native
标签: