用Location對象和history對象修改頁面url

1.通過hash屬性更改url

Location 對象包含有關(guān)當(dāng)前 URL 的信息

• Location.hash是URL的錨部分
• Location.href是完整的URL

通過hash來更改url

location.hash = "newhash"

2.HTML5 history模式

2.1通過history對象的方法更改url

history對象，用來保存瀏覽歷史

• history.pushState() 瀏覽歷史中添加記錄
• history.replaceState() 瀏覽歷史中添加記錄

通過pushState()來更改url

• state：一個(gè)與指定網(wǎng)址相關(guān)的狀態(tài)對象，popstate事件觸發(fā)時(shí)，該對象會(huì)傳入回調(diào)函數(shù)。如果不需要這個(gè)對象，此處可以填null。
• title：新頁面的標(biāo)題，但是所有瀏覽器目前都忽略這個(gè)值，因此這里可以填null。
• url：新的資源

history.pushState({},'',home.html)

通過replaceState()來更改url

• history.replaceState方法的參數(shù)與pushState方法一模一樣，區(qū)別是它修改瀏覽歷史中當(dāng)前紀(jì)錄。

history.replaceState({},'',home.html)

2.2瀏覽器頁面前進(jìn)和退后

退后

history.back() //等價(jià)于 history.go(-1)

前進(jìn)

history.forward() //等價(jià)于 history.go(1) 與50位技術(shù)專家面對面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的用Location对象和history对象修改页面url的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。