url的hash和HTML5的history

前端路由的核心就在于更改url，页面不刷新，如何做到这一点呢？

第一种方法是改变url的hash值。

location.href
>>> http://localhost:8080/#

location.hash = 'foo'
>>> http://localhost:8080/#/foo

改变hash值，页面不刷新，页面会根据前端的路由映射关系找到相应的组件数据并呈现。

第二种方式是使用HTML5的history模式

#1 pushState()与back()

location.href
>>> http://localhost:8080

history.pushState({},'','foo')
>>> http://localhost:8080/foo

history.pushState({},'','about')
>>> http://localhost:8080/about

history.pushState({},'','bar')
>>> http://localhost:8080/bar

history.back()
>>> http://localhost:8080/about

history.back()
>>> http://localhost:8080/foo

把url看做一个栈，pushState()向栈中放入一个url，而back()删除掉栈顶的url，页面总是呈现栈顶的url。
这种方式保留了历史记录，页面可以返回。

#2 replaceState()

location.href
>>> http://localhost:8080

history.replaceState({},'','home')
>>> http://localhost:8080/home

history.replaceState({},'','about')
>>> http://localhost:8080/about

直接改变了url，这种方式没有保存历史记录，页面不可返回。

#3 go()与forward()

//这两个方法一般与pushState()结合使用
//pushState()会使浏览器保留一个url的历史记录，而go()方法与forward()方法都可以改变这个历史记录的状态

history.go(-1) 等价于 history.back()
history.go(1) 等价于 history.forward()
history.go(-2)
history.go(2)
...