url的hash和HTML5的history
第一种方法是改变url的hash值。
**显示当前路径 : **location.href
http://localhost:8080/#
切换路径: location.hash = 'foo'
http://localhost:8080/#/foo
第二种方式是使用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
1234567891011121314151617
把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
12345678
直接改变了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)
...