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

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

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

整理下需求：

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

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

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

當(dāng)點(diǎn)擊返回時(shí)可會到上個(gè)頁面

效果如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)用戶點(diǎn)擊頁碼按鈕時(shí)，可使用 ajax 獲取對應(yīng)頁碼的數(shù)據(jù)，拼裝 DOM 放到頁面上，然后調(diào)用下面的 setUrl 方法實(shí)現(xiàn)瀏覽器 URL 的更新。

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

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

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

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

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

總結(jié)

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

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