005 路由模式详解

在网上多少了解过路由模式，但一直以来都是一知半解，只知道hash模式在url中会有一个 # 号，而且通常因为不是很好看而改用 history 模式。但实际上任何技术方案的实现都是为了解决某些特定问题。

常见路由模式

• hash： SPA 出现后最常见的模式，主要基于锚点实现。
• brower：通过 html5 标准中的 history api 来监听 popstate 事件实现。每一次路由变化都会引起重定向。
• memory：通过在内存中维护一个栈用于管理历史的方式实现，较复杂，很少使用。
• static：主要用于ssr，需要后端配合

各方案比较

1. hash

   • 优点
     • 实现简单，兼容到ie8
     • 绝大多数框架支持hash
     • 不需要服务端配合
     • 除了ajax请求不会再发起其他请求
   • 缺点
     • 对于重定向操作，后端无法获取 hash 部分参数
     • 后端无法跟踪前端路由信息
     • 在项目中使用锚点功能会与当前机制冲突

2. brower

   • 优点
     • 重定向不会丢失参数，后端可以获取参数
     • 绝大多数框架支持brower
     • 后端可以跟踪路由信息
     • 可以使用history.state来获取url对应状态信息
   • 缺点
     • 只兼容到ie10 （也够了）
     • 需要后端支持，返回文档流

3. memory

   • 优点
     • 无兼容问题因为保存在内存中
     • 无需后端配合
   • 缺点
     • 很少有框架支持（除react-router）
     • 难度大，工作量大
     • 前进后退路由管理非常麻烦，尤其安卓

4. ssr

   略

使用场景

1. hash
   • 需要兼容ie8
   • 无重定向传参需要
   • 无锚点功能需求
   • 后端无需跟踪路由
2. brower
   • 需要锚点功能
   • 需要重定向传参
   • 后端需要跟踪路由
   • 同构
3. memory
   • 需要兼容到ie8以下（丧心病狂）
   • React Native