Hash模式和History模式的区别

首先强调一下

不管哪种模式，都是客户端路由的实现方式。

也就是当路径发生变化的时候，不会向服务器发生请求，是由JS监视路径的变化，然后根据不同的地址，渲染不同的内容；如果需要服务器内容的话，会发送 ajax 请求来获取。

表现形式的区别

Hash 模式路由中带着 # 号，# 后边的内容作为我们的路由地址，可以通过问号携带 URL 参数。

官方文档上说这种模式很丑，路径中带着一些跟路径无关的符号，比如 # 号和 ? 号

再来看 History 模式

History 模式的 URL 就是一个正常的 URL ，要用好 History 模式的话，还需要服务端配置支持

原理的区别

Hash 模式是基于锚点，以及 onhashchange 事件，通过锚点的值作为路由地址，当地址发生变化后，触发 onhashchange 事件，在这里，根据路径决定在页面上呈现的内容。

History 模式是基于 HTML5 中的 History API 也就是 History 对象的 history.pushState() [IE10以后才支持] 和 history.replaceState()

pushState 方法和 push 方法的区别是：

当我们调用 push 方法的时候，路径会发生变化，这时候，要向服务器发送请求，而我们调用 history.pushState 的时候，它不会向服务器发送请求，只会去改变我们浏览器地址栏的地址，并且把这个地址记录到我们的历史记录里边。

所以通过 pushState 我们可以实现客户端路由，但是我们要知道的是 history.pushState 方法，是 IE10 以后才支持的，也就是我们使用 history 这种模式，它有兼容性问题，如果我们想要兼容 IE9 以前的浏览器，这时候，我们只能用 Hash 模式。