徹底搞懂路由跳轉：location 和 history 接口

BWrong 發布于2019-08-22 15:56 / 2243人閱讀

摘要：在單頁應用中，通常由前端來配置路由，根據不同的顯示不同的內容。接口是新增的，它有五個方法可以改變而不刷新頁面。事件能監聽除和外的變化。而模式下，我們不僅要在事件回調里處理的變化，還需要分別在和方法里處理的變化。

在單頁應用中，通常由前端來配置路由，根據不同的 url 顯示不同的內容。想要知道這是如何做到的，首先得了解瀏覽器提供的兩大 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。我們在單頁應用中需要做到的是改變 url 不刷新頁面，location 接口提供以下兩種方式可以做到：

location.href 賦值時只改變 url 的 hash

直接賦值 location.hash

而上面的列出其余兩個屬性 location.search 會直接刷新頁面，這個就不解釋了。但 location.pathname 照道理來說只改變 hash 應該是可以的，但實際上瀏覽器會編碼這個屬性值，所以無法直接賦帶 # 號的值。

window.history

history 接口是 HTML5 新增的，它有五個方法可以改變 url 而不刷新頁面。

history.pushState()

history.replaceState()

history.go()

上面只演示了三個方法，因為 history.back() 等價于 history.go(-1)，history.forward() 則等價于 history.go(1)，這三個接口等同于瀏覽器界面的前進后退。

如何監聽 url 的變化

現在我們已經知道如何不刷新頁面改變頁面的 url。雖然頁面沒刷新，但我們要改變頁面顯示的內容。這就需要 js 監聽 url 的變化從而達到我們的目的。

我們有兩個事件可以監聽 url 的改變：

hashchange

hashchange 事件能監聽 url hash 的改變。

先要加上事件監聽的代碼：

window.addEventListener("hashchange", function(e) {
  console.log(e)
})

然后就可以在頁面的 console 里愉快的實驗了：

從上圖中我們可以知道不管是通過 location 接口直接改變 hash，還是通過 history 接口前進后退（只是 hash 改變的情況下），我們都可以監聽到 url hash 的改變。但這個事件也只能監聽 url hash 的變化。所以我們需要一個更強大的事件：popstate。

popstate

popstate 事件能監聽除 history.pushState() 和 history.replaceState() 外 url 的變化。

先加上事件監聽的代碼：

window.addEventListener("popstate", function(e) {
  console.log(e)
})

然后又可以在頁面的 console 里愉快的實驗了：

其實不止 history.pushState() 和 history.replaceState() 對 url 的改變不會觸發 popstate 事件，當這兩個方法只改變 url hash 時也不會觸發 hashchange 事件。

hash 模式和 history 模式

我們都知道單頁應用的路由有兩種模式：hash 和 history。如果我們在 hash 模式時不使用 history.pushState() 和 history.replaceState() 方法，我們就只需要在 hashchange 事件回調里編寫 url 改變時的邏輯就行了。而 history 模式下，我們不僅要在 popstate 事件回調里處理 url 的變化，還需要分別在 history.pushState() 和 history.replaceState() 方法里處理 url 的變化。而且 history 模式還需要后端的配合，不然用戶刷新頁面就只有 404 可以看了?

所以 hash 模式下我們的工作其實是更簡單的，但為什么現在都推薦用 history 模式呢？總不是 hash 模式下的 url 太丑了，畢竟這是個看臉的世界?

不過 vue-router 在瀏覽器支持 pushState() 時就算是 hash 模式下也是用 history.pushState() 來改變 url，不知道有沒什么深意？還有待研究...

云服務器 GPU云服務器路由接口接口跳轉路由器接口路由和導航

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93878.html

徹底理清前端單頁面應用（SPA）的實現原理【精讀源碼】

showImg(https://segmentfault.com/img/bVbvOmp?w=1612&h=888); 隨著React Vue前端框架的興起，出現了Vue-router,react-router-dom等前端路由管理庫，利用他們構建出來的單頁面應用，也是越來越接近原生的體驗，再也不是以前的點擊標簽跳轉頁面，刷新整個頁面了，那么他們的原理是什么呢？優質gitHub開源練手項目： ...

xiaodao 2019-08-02 15:39 評論0 收藏0
徹底理清前端單頁面應用（SPA）的實現原理【精讀源碼】

showImg(https://segmentfault.com/img/bVbvOmp?w=1612&h=888); 隨著React Vue前端框架的興起，出現了Vue-router,react-router-dom等前端路由管理庫，利用他們構建出來的單頁面應用，也是越來越接近原生的體驗，再也不是以前的點擊標簽跳轉頁面，刷新整個頁面了，那么他們的原理是什么呢？優質gitHub開源練手項目： ...

崔曉明 2019-08-30 15:44 評論0 收藏0
徹底理清前端單頁面應用（SPA）的實現原理【精讀源碼】

showImg(https://segmentfault.com/img/bVbvOmp?w=1612&h=888); 隨著React Vue前端框架的興起，出現了Vue-router,react-router-dom等前端路由管理庫，利用他們構建出來的單頁面應用，也是越來越接近原生的體驗，再也不是以前的點擊標簽跳轉頁面，刷新整個頁面了，那么他們的原理是什么呢？優質gitHub開源練手項目： ...

sunny5541 2019-08-26 10:29 評論0 收藏0