0. 前言
在Web开发中，路由是指根据用户请求的URL地址，确定用户访问的页面资源、参数等，是前端开发中不可缺少的重要部分。Vue router中提供了两种路由模式，一种是hash模式，另一种是history模式。
1. Hash模式路由
Hash模式是默认的路由模式。在URL中加入"#"，比如http://www.baidu.com/#/abc，#后面的内容就是路由地址。Hash模式有一个优点，就是兼容性比较好，因为它不需要后端支持，只要在前端将URL中的#后面的内容进行解析，就能获取到路由信息。当URL的hash部分发生变化时，会触发window.onhashchange事件，它可以用来监听浏览器的返回和前进按钮、手动修改URL的hash部分等操作。
在Web浏览器中，location对象表示当前文档的URL信息。一个典型的hash模式URL地址如下图所示，它由多个部分组成。
location对象的hash属性有以下特点：
- 改变location.hash属性的值不会触发浏览器的页面重新渲染，这是SPA必需的特点。
- hash值变化会触发页面跳转，即浏览器的前进、后退。
- hash模式的路由不会提交到服务端。
2. History模式路由
在History模式下，URL不会像hash模式那样带有#号，而是一个正常的URL，例如：http://www.baidu.com/path/to/page。History模式是通过利用 HTML5 History API 实现的，可以在不刷新整个页面的情况下，动态改变当前URL地址和页面内容。可以通过window.onpopstate来监听路由的变化。
使用History模式需要后端的支持，因为它需要在服务器端进行配置。如果用户直接访问了一个History模式下的URL，而此时后端又没有相应的配置，就会出现404错误。Vue router提供了一个特殊的fallback选项，用于定义在服务器返回404错误页面时，应该返回什么样的页面。常见的做法是将fallback设为单页面应用的主页，以保证用户可以正确访问到页面。
HTML5 History API有如下的属性和方法：
| 方法/属性 | 解释 |
|---|---|
| history.pushState() | 向历史记录添加一个状态，并改变当前URL |
| history.replaceState() | 用新的状态替换当前状态，不会添加一个新的历史记录条目 |
| history.go() | 加载历史记录中的某个特定页面 |
| history.back() | 加载历史记录中的前一个页面，相当于点击浏览器的后退按钮 |
| history.forward() | 加载历史记录中的下一个页面，相当于点击浏览器的前进按钮 |
| history.length | 返回历史记录中的条目数 |
3. 如何选择路由模式
- to B 的系统推荐用hash，简单易用，对url规范不敏感。
- to C 的系统，可以考虑选择 H5 history，需要服务端支持。
- 需要考虑成本和收益，尽量选择简单的。
