前言：

---

路由這概念最開始是在后端出現的，在前后端不分離的時候，由后端來控制路由，服務器接收客戶端的請求，解析對應的url路徑，并返回對應的頁面/資源。簡單的說，路由就是根據不同的url地址來展示不同的內容或頁面。

現在的網絡應用程序越來越多的使用AJAX異步請求完成頁面的無縫刷新，雖然Ajax解決了用戶交互時體驗的痛點，但是多頁面之間的跳轉一樣會有不好的體驗，所以便有了spa(single-page application)使用的誕生。而spa應用便是基于前端路由實現的，所以便有了前端路由。

路由的實現方式：

---

路由需要實現三個功能：

• 當瀏覽器地址變化時，切換頁面；
• 點擊瀏覽器【后退】、【前進】按鈕，網頁內容跟隨變化；
• 刷新瀏覽器，網頁加載當前路由對應內容；

在單頁面web網頁中, 單純的瀏覽器地址改變, 網頁不會重載，如單純的hash網址改變網頁不會變化，因此我們的路由主要是通過監聽事件，并利用js實現動態改變網頁內容，有兩種實現方式：

• hash模式：監聽瀏覽器地址hash值變化，執行相應的js切換網頁；
• history模式：利用history API實現url地址改變，網頁內容改變；

兩者之間的區別就是hash會在瀏覽器地址后面增加#號，而history可以自定義地址。

路由的實現：

---

hash模式：

早期的前端路由的實現就是基于location.hash來實現的。其實現原理也很簡單：

hash的幾個特性：

• hash指的是地址中#號以及后面的字符，也稱為散列值。hash也稱作錨點，本身是用來做頁面跳轉定位的。
• 散列值是不會隨請求發送到服務器端的，所以改變hash，不會重新加載頁面。
• 監聽 window 的 hashchange 事件，當散列值改變時，可以通過 location.hash 來獲取和設置hash值。
• hash值的改變，都會在瀏覽器的訪問歷史中增加一個記錄。因此我們能通過瀏覽器的回退、前進按鈕控制hash的切換。
• location.hash值的變化會直接反應到瀏覽器地址欄。

hash的改變方式：
使用window.location.hash屬性及窗口的onhashchange事件，可以實現監聽瀏覽器地址hash值變化，執行相應的js切換網頁。

• 通過a標簽，并設置href屬性，當用戶點擊這個標簽后，URL就會發生改變，從而觸發hashchange事件。

<a href="#user">srtian</a>

• 直接使用JavaScript來對loaction.hash進行賦值，從而改變URL，觸發hashchange事件。

location.hash="#user"window.addEventListener('hashchange', e => {});

• 直接通過輸入url鏈接或者修改鏈接進行跳轉。

大概的流程：

history模式：

hash雖然也很不錯，但使用時都需要加上#，并不是很美觀，因此HTML5又提供了History API來實現URL的變化。

• window.history 屬性指向 History 對象，它表示當前窗口的瀏覽歷史。當發生改變時，只會改變頁面的路徑，不會刷新頁面。
• History 對象保存了當前窗口訪問過的所有頁面網址。通過 history.length 可以得出當前窗口瀏覽網址的記錄。
• 由于安全原因，瀏覽器不允許腳本讀取這些地址，但是允許在地址之間導航。
• 瀏覽器工具欄的“前進”和“后退”按鈕，其實就是對 History 對象進行操作。

主要屬性：

• History.length：當前窗口訪問過的網址數量（包括當前網頁）
• History.state：History 堆棧最上層的狀態值

主要的API：

• History.back()：移動到上一個網址，等同于點擊瀏覽器的后退鍵。對于第一個訪問的網址，該方法無效果。
• History.forward()：移動到下一個網址，等同于點擊瀏覽器的前進鍵。對于最后一個訪問的網址，該方法無效果。
• History.go()：接受一個整數作為參數，以當前網址為基準，移動到參數指定的網址。如果參數超過實際存在的網址范圍，該方法無效果；如果不指定參數，默認參數為0，相當于刷新當前頁面。
• History.pushState()：用于在歷史中添加一條記錄。pushState()方法不會觸發頁面刷新，只是導致 History 對象發生變化，地址欄會有變化。
• History.replaceState()：用來修改 History 對象的當前記錄，用法與 pushState() 方法一樣。

window.history.pushState(null, null, "http://www.baidu.com");window.addEventListener('popstate', e => {});

history的幾個特性：

• 狀態對象（state object）：一個JavaScript對象，與用pushState()方法創建的新歷史記錄條目關聯。無論何時用戶導航到新創建的狀態，都會觸發popstate事件，并能在事件中使用該對象。
• 標題（title）：一般瀏覽器會忽略，最好傳入null。
• 地址（URL）：就是需要新增的歷史記錄的地址，瀏覽器不會去直接加載改地址，但后面也可能會去嘗試加載該地址。此外需要注意的是，傳入的URL與當前URL應該是同源的。

popstate 事件：
每當 history 對象出現變化時，就會觸發 popstate 事件。

注意：

• 僅僅調用pushState()方法或replaceState()方法 ，并不會觸發該事件。
• 只有用戶點擊瀏覽器倒退按鈕和前進按鈕，或者使用 JavaScript 調用History.back()、History.forward()、History.go()方法時才會觸發。
• 該事件只針對同一個文檔，如果瀏覽歷史的切換，導致加載不同的文檔，該事件也不會觸發。
• 頁面第一次加載的時候，瀏覽器不會觸發popstate事件。

大概的流程：

總結

以上是生活随笔為你收集整理的浏览器-路由的模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。