Hash 和 History 模式

 Hash 和 History 模式的区别

首先需要强调的是不管哪种模式都是客户端路由的实现方式，也就是当路径放生变化之后不会向服务器发送请求，是用 js 监视路径的变化的变化，然后根据不同的地址渲染不同的内容如果需要服务端内容的话，需要使用Ajax发送请求。

 

表现形式的区别

- Hash 模式

https://music.136.com/#/user?id=10029 这种模式的地址中带有 # 号， # 号后面就是路由地址可以使用 ？ 携带路由参数，官方文档中说这种模式很丑，路径中带着一些与地址无关的符号，比如井号和问好。

- History 模式

https://music.136.com/user/10029 

 

原理的区别

- Hash 模式是基于锚点，以及 onhashchange 事件

通过锚点的值作为路由地址，当地址发生变化后触发 onhashchange 事件，根据路径决定页面渲染的内容。

- History 模式是基于 HTML5 中的 History API

 - history.pushState()  IE10 以后才支持

 - history.relplaceState() 

 

pushState 方法和 push 方法的区别

当调用 history.push 方法的时候，路径会发生变化，这个时候要想服务器发送请求，而调用 history.pushState 方法不会向