在使用 Vue 或者 React 框架搭建的前端项目时，通常会有 hash 模式和 history 模式两种路由方式。本文主要对其的特点、使用场景进行对比。参考自《前端路由模式详解》和《你真的了解前端路由吗？》。
Hash 路由
Hash 路由主要是基于锚点的原理实现，使用 URL 的 Hash 来模拟一个完整的 URL，因此当 URL 改变的时候页面并不会重载。它会监听 url 中 hash 的变化，根据不同的 hash 值渲染不同的内容，这种路由不向服务器发送请求，不需要服务端的支持。
锚点是网页制作中超级链接的一种，又叫命名锚记，像一个迅速定位器一样，是一种页面内的超级链接，运用相当普遍。 使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。 然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。
Hash 路由会在 url 后面加上 # 的模式，如 http://127.0.0.1:8000/test/index.html#/login 这个 url 后面的 #/login 就是 hash 值。当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 hashchange 事件。
优点
- 实现简单，兼容性好（兼容到ie8）
- 绝大多数前端框架均提供了给予 hash 的路由实现
- 不需要服务器端进行任何设置和开发
- 除了资源加载和 ajax 请求以外，不会发起其他请求
缺点
- 对于部分需要重定向的操作，后端无法获取 hash 部分内容，导致后台无法取得 url 中的数据，典型的例子就是微信公众号的 oauth 验证
- 服务器端无法准确跟踪前端路由信息
- 对于需要锚点功能的需求会与目前路由机制冲突
- 路径在井号 # 的后面，看起来不怎么美观
History 路由
History 路由则会直接改变 URL，所以在路由跳转的时候会丢失一些地址信息，在刷新或直接访问路由地址的时候会匹配不到静态资源，会出现 404 页面。它会监听 url 中的路径变化，需要客户端和服务端共同的支持。
优点
- 对于重定向过程中不会丢失 url 中的参数。后端可以拿到这部分数据
- 绝大多数前段框架均提供了 History 的路由实现
- 后端可以准确跟踪路由信息
- 可以使用 history.state 来获取当前 url 对应的状态信息
缺点
- 兼容性不如 hash 路由(只兼容到 IE10)
- 需要后端支持，每次返回 html 文档，否则刷新会出现 404 页面