本文為饑人谷原創(chuàng)文章，首發(fā)于 前端學(xué)習(xí)指南。

問沒有具體業(yè)務(wù)場景的技術(shù)問題都是耍流氓，那在回答這個問題之前先簡單介紹一下業(yè)務(wù)場景。

下午6點半，小 H寫了一個下午的代碼揉揉眼睛伸個懶腰，「今天終于能早點回去了，先刷會知乎歇會」。突然，產(chǎn)品 小U一臉淫笑飄了過來，小 H 略感不妙。
『嗨嗨~ 你這工作狀態(tài)不飽和啊，有個小需求來看看~。現(xiàn)在需要做一個新聞?wù)故卷?#xff0c;主功能區(qū)塊分為新聞列表和分頁兩部分。很簡單，兩天能搞定吧~』小 U 說。
小 H 看了看原型稿，心想確實不難。點擊分頁時把直接把分頁參數(shù)傳遞給后臺，頁面刷新后臺直接返回渲染后的數(shù)據(jù)就行了，模板寫的好的話甚至 js 都不需要了。正當(dāng)小 H 開口準(zhǔn)備說說技術(shù)實現(xiàn)時，被小 U 打斷...
『不過為了體驗好一些，在用戶點下一頁的時候別刷新頁面』小 U 說。
『不刷新頁面沒關(guān)系，我用 ajax 可以實現(xiàn)，不過時間嘛...』小 H 略有所思
『果然是大牛啊，能實現(xiàn)我就放心了。時間好商量，不過這個項目特別急，晚上加加油啊』，說完小 U 就飄走了。
『cao, 看來又走不成了』小 H 嘀咕著。
兩分鐘后小 U 又跑了過來，『剛才忘了跟你說了，用戶點了下一頁后地址欄的地址要跟著變，這時候刷新頁面還能定位到當(dāng)前頁』
『 x10000~~~』

整理下需求：

點擊分頁頁碼可實現(xiàn)無刷新頁面加載

同時 URL 在數(shù)據(jù)加載后會發(fā)生變化展示對應(yīng)頁碼

刷新頁面（帶頁碼參數(shù)）會定位到當(dāng)前頁碼

當(dāng)點擊返回時可會到上個頁面

效果如Demo 所示。

對于第1條，我們可以使用 ajax 動態(tài)獲取對應(yīng)頁碼的數(shù)據(jù)。

對于第2條，我們可以使用 html5的 api「history.pushState」，用于改變 URL。

對于第3條，我們可以根據(jù) URL 中頁碼參數(shù)獲取對應(yīng)頁碼的數(shù)據(jù)再做展示。

對于第4條，可以使用 「window.onpopstate」來監(jiān)聽返回事件

那history.pushState如何使用呢？比如當(dāng)用戶點擊頁碼按鈕時，可使用 ajax 獲取對應(yīng)頁碼的數(shù)據(jù)，拼裝 DOM 放到頁面上，然后調(diào)用下面的 setUrl 方法實現(xiàn)瀏覽器 URL 的更新。

function setUrl(page){var url = location.pathname + '?page=' + pagehistory.pushState({url: url, title: document.title}, document.title, url) }

history.pushState() 帶有三個參數(shù)：一個狀態(tài)對象，一個標(biāo)題（現(xiàn)在被忽略了），以及一個可選的URL地址。

• state object — 狀態(tài)對象是一個由 pushState()方法創(chuàng)建的與歷史紀(jì)錄相關(guān)的JS對象。
• title — 火狐瀏覽器現(xiàn)在已經(jīng)忽略此參數(shù)，將來也許可能被使用。考慮到將來有可能的改變，傳遞一個空字符串是安全的做法。當(dāng)然，你可以傳遞一個短標(biāo)題給你要轉(zhuǎn)變成的狀態(tài)。
• URL — 這個參數(shù)提供了新歷史紀(jì)錄的地址。請注意，瀏覽器在調(diào)用pushState()方法后不會去加載這個URL，但有可能在之后會這樣做，比如用戶重啟瀏覽器之后。新的URL可以是絕對地址，也可以是相對地址。新URL必須和當(dāng)前URL在同一個源下。

想看實現(xiàn)效果？參考這里一個無刷新分頁的 DEMO ，建議看看源碼實現(xiàn)。

歡迎進(jìn)群探討技術(shù)，點擊此微信掃碼進(jìn)群。

總結(jié)

以上是生活随笔為你收集整理的#{}不自动改参数类型_如何在不刷新页面的情况下改变URL的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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