url的hash和HTML5的history

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)
...
上一篇:Error while bulk request ElasticsearchException[Elasticsearch exception [type=illegal_argument_excep


下一篇:Illegal unquoted character ((CTRL-CHAR, code 10)): has to be escaped using backslash to be included