資訊專欄INFORMATION COLUMN
摘要：在單頁(yè)應(yīng)用中，通常由前端來(lái)配置路由，根據(jù)不同的顯示不同的內(nèi)容。接口是新增的，它有五個(gè)方法可以改變而不刷新頁(yè)面。事件能監(jiān)聽(tīng)除和外的變化。而模式下，我們不僅要在事件回調(diào)里處理的變化，還需要分別在和方法里處理的變化。
在單頁(yè)應(yīng)用中，通常由前端來(lái)配置路由，根據(jù)不同的 url 顯示不同的內(nèi)容。想要知道這是如何做到的，首先得了解瀏覽器提供的兩大 API：
window.location
location.href
location.hash
location.search
location.pathname
window.history
history.pushState()
history.replaceState()
history.go()
history.back()
history.forward()
window.location我們先了解 location 對(duì)象，location 有很多的屬性。我們可以通過(guò)改變其屬性值修改頁(yè)面的 url。我們?cè)趩雾?yè)應(yīng)用中需要做到的是改變 url 不刷新頁(yè)面，location 接口提供以下兩種方式可以做到：
location.href 賦值時(shí)只改變 url 的 hash
直接賦值 location.hash
而上面的列出其余兩個(gè)屬性 location.search 會(huì)直接刷新頁(yè)面，這個(gè)就不解釋了。但 location.pathname 照道理來(lái)說(shuō)只改變 hash 應(yīng)該是可以的，但實(shí)際上瀏覽器會(huì)編碼這個(gè)屬性值，所以無(wú)法直接賦帶 # 號(hào)的值。
window.historyhistory 接口是 HTML5 新增的，它有五個(gè)方法可以改變 url 而不刷新頁(yè)面。
history.pushState()
history.replaceState()
history.go()
上面只演示了三個(gè)方法，因?yàn)?history.back() 等價(jià)于 history.go(-1)，history.forward() 則等價(jià)于 history.go(1)，這三個(gè)接口等同于瀏覽器界面的前進(jìn)后退。
如何監(jiān)聽(tīng) url 的變化現(xiàn)在我們已經(jīng)知道如何不刷新頁(yè)面改變頁(yè)面的 url。雖然頁(yè)面沒(méi)刷新，但我們要改變頁(yè)面顯示的內(nèi)容。這就需要 js 監(jiān)聽(tīng) url 的變化從而達(dá)到我們的目的。
我們有兩個(gè)事件可以監(jiān)聽(tīng) url 的改變：
hashchangehashchange 事件能監(jiān)聽(tīng) url hash 的改變。
先要加上事件監(jiān)聽(tīng)的代碼：
window.addEventListener("hashchange", function(e) {
console.log(e)
})
然后就可以在頁(yè)面的 console 里愉快的實(shí)驗(yàn)了：
從上圖中我們可以知道不管是通過(guò) location 接口直接改變 hash，還是通過(guò) history 接口前進(jìn)后退（只是 hash 改變的情況下），我們都可以監(jiān)聽(tīng)到 url hash 的改變。但這個(gè)事件也只能監(jiān)聽(tīng) url hash 的變化。所以我們需要一個(gè)更強(qiáng)大的事件：popstate。
popstatepopstate 事件能監(jiān)聽(tīng)除 history.pushState() 和 history.replaceState() 外 url 的變化。
先加上事件監(jiān)聽(tīng)的代碼：
window.addEventListener("popstate", function(e) {
console.log(e)
})
然后又可以在頁(yè)面的 console 里愉快的實(shí)驗(yàn)了：
其實(shí)不止 history.pushState() 和 history.replaceState() 對(duì) url 的改變不會(huì)觸發(fā) popstate 事件，當(dāng)這兩個(gè)方法只改變 url hash 時(shí)也不會(huì)觸發(fā) hashchange 事件。
hash 模式和 history 模式我們都知道單頁(yè)應(yīng)用的路由有兩種模式：hash 和 history。如果我們?cè)?hash 模式時(shí)不使用 history.pushState() 和 history.replaceState() 方法，我們就只需要在 hashchange 事件回調(diào)里編寫(xiě) url 改變時(shí)的邏輯就行了。而 history 模式下，我們不僅要在 popstate 事件回調(diào)里處理 url 的變化，還需要分別在 history.pushState() 和 history.replaceState() 方法里處理 url 的變化。而且 history 模式還需要后端的配合，不然用戶刷新頁(yè)面就只有 404 可以看了?
所以 hash 模式下我們的工作其實(shí)是更簡(jiǎn)單的，但為什么現(xiàn)在都推薦用 history 模式呢？總不是 hash 模式下的 url 太丑了，畢竟這是個(gè)看臉的世界?
不過(guò) vue-router 在瀏覽器支持 pushState() 時(shí)就算是 hash 模式下也是用 history.pushState() 來(lái)改變 url，不知道有沒(méi)什么深意？還有待研究...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93878.html
showImg(https://segmentfault.com/img/bVbvOmp?w=1612&h=888); 隨著React Vue前端框架的興起，出現(xiàn)了Vue-router,react-router-dom等前端路由管理庫(kù)，利用他們構(gòu)建出來(lái)的單頁(yè)面應(yīng)用，也是越來(lái)越接近原生的體驗(yàn)，再也不是以前的點(diǎn)擊標(biāo)簽跳轉(zhuǎn)頁(yè)面，刷新整個(gè)頁(yè)面了，那么他們的原理是什么呢？ 優(yōu)質(zhì)gitHub開(kāi)源練手項(xiàng)目： ...
showImg(https://segmentfault.com/img/bVbvOmp?w=1612&h=888); 隨著React Vue前端框架的興起，出現(xiàn)了Vue-router,react-router-dom等前端路由管理庫(kù)，利用他們構(gòu)建出來(lái)的單頁(yè)面應(yīng)用，也是越來(lái)越接近原生的體驗(yàn)，再也不是以前的點(diǎn)擊標(biāo)簽跳轉(zhuǎn)頁(yè)面，刷新整個(gè)頁(yè)面了，那么他們的原理是什么呢？ 優(yōu)質(zhì)gitHub開(kāi)源練手項(xiàng)目： ...
showImg(https://segmentfault.com/img/bVbvOmp?w=1612&h=888); 隨著React Vue前端框架的興起，出現(xiàn)了Vue-router,react-router-dom等前端路由管理庫(kù)，利用他們構(gòu)建出來(lái)的單頁(yè)面應(yīng)用，也是越來(lái)越接近原生的體驗(yàn)，再也不是以前的點(diǎn)擊標(biāo)簽跳轉(zhuǎn)頁(yè)面，刷新整個(gè)頁(yè)面了，那么他們的原理是什么呢？ 優(yōu)質(zhì)gitHub開(kāi)源練手項(xiàng)目： ...
閱讀 2330·2021-11-25 09:43
閱讀 3467·2021-10-25 09:48
閱讀 1340·2021-09-13 10:24
閱讀 2753·2019-08-29 15:07
閱讀 1288·2019-08-29 13:14
閱讀 3281·2019-08-29 12:22
閱讀 1365·2019-08-29 11:32
閱讀 3255·2019-08-29 11:23
