hash 与 history 路由模式

1.Hash模式

基于浏览器的hashchange事件，地址变化时，通过window.location.hash 获取地址上的hash值；并通过构造Router类，配置routes对象设置hash值与对应的组件内容。

属性	含义
location.protocal	协议
location.hostname	主机名
location.host	主机
location.port	端口号
location.patchname	访问页面
location.search	搜索内容
location.hash	哈希值

//http://127.0.0.1:8081/01-hash.html?a=10&b=20#/kite/age
location.protocal // 'http:'
localtion.hostname // '127.0.0.1'
location.host // '127.0.0.1:8081'
location.port //8001
location.pathname //'01-hash.html'
location.serach // '?a=10&b=20'
location.hash // '#/kite/age'

• 优点

1. hash值会出现在URL中, 但是不会被包含在Http请求中, 因此hash值改变不会重新加载页面
2. hash改变会触发hashchange事件, 能控制浏览器的前进后退
3. 兼容性好

• 缺点

1. 地址栏中携带#，不美观
2. 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL
3. hash有体积限制，故只可添加短字符串
4. 设置的新值必须与原来不一样才会触发hashchange事件，并将记录添加到栈中
5. 每次URL的改变不属于一次http请求，所以不利于SEO优化

2.History模式 

利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。pushState()方法可以改变URL地址且不会发送请求，replaceState()方法可以读取历史记录栈，还可以对浏览器记录进行修改。 这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

API	定义
history.pushState (data, title [, url])	pushState主要用于往历史记录堆栈顶部添加一条记录。各参数解析如下：①data会在onpopstate事件触发时作为参数传递过去；②title为页面标题，当前所有浏览器都会忽略此参数；③url为页面地址，可选，缺少时表示为当前页地址
history.replaceState (data, title [, url])	更改当前的历史记录，参数同上； 上面的pushState是添加，这个更改
history.state	用于存储以上方法的data数据，不同浏览器的读写权限不一样
window.onpopstate	响应pushState或者replaceState的调用

• 优点

1. 没有#，更加美观
2. pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL
3. pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中
4. pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中
5. pushState() 可额外设置 title 属性供后续使用
6. 浏览器的进后退能触发浏览器的popstate事件，获取window.location.pathname来控制页面的变化

• 缺点

1. URL的改变属于http请求，借助history.pushState实现页面的无刷新跳转，因此会重新请求服务器。所以前端的 URL 必须和实际向后端发起请求的 URL 一致。如果用户输入的URL回车或者浏览器刷新或者分享出去某个页面路径，用户点击后，URL与后端配置的页面请求URL不一致，则匹配不到任何静态资源，就会返回404页面。所以需要后台配置支持，覆盖所有情况的候选资源，如果 URL 匹配不到任何静态资源，则应该返回app 依赖的页面或者应用首页。
2. 兼容性差，特定浏览器支持

总结 

1.history和hash一般来说都能用，history美观点
2.history修改更自由，

3.两个原理差不多都是通过事件监听，一个是onhashchange（），另一个onpopstate（）

4.hash模式下，仅hash符号之前的内容会被包含在请求中，如http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

5.history模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如http://www.abc.com/book/id如果后端缺少对/book/id的路由处理，将返回 404 错误。