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