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

1.通過hash屬性更改url

Location 對象包含有關當前 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：一個與指定網址相關的狀態對象，popstate事件觸發時，該對象會傳入回調函數。如果不需要這個對象，此處可以填null。
• title：新頁面的標題，但是所有瀏覽器目前都忽略這個值，因此這里可以填null。
• url：新的資源

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

通過replaceState()來更改url

• history.replaceState方法的參數與pushState方法一模一樣，區別是它修改瀏覽歷史中當前紀錄。

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

2.2瀏覽器頁面前進和退后

退后

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

前進

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。