哈希路由（hash模式）和歷史路由（history模式）的區別

hash模式

這里的 hash 就是指 url 尾巴后的 # 號以及后面的字符。這里的 # 和 css 里的 # 是一個意思。hash 也 稱作 錨點，本身是用來做頁面定位的，她可以使對應 id 的元素顯示在可視區域內。

由於 hash 值變化不會導致瀏覽器向服務器發出請求，而且 hash 改變會觸發 hashchange 事件，瀏覽器的進后退也能對其進行控制。

hash 路由：監聽 url 中 hash 的變化，然后渲染不同的內容，這種路由不向服務器發送請求，不需要服務端的支持；

當頁面中的 hash 發生變化時，會觸發hashchange事件

 
//監聽hash路由

window.addEventListener('hashchange', function(){ 
    // 監聽hash變化，點擊瀏覽器的前進后退會觸發
 })

history模式

首先，hash 本來是拿來做頁面定位的，如果拿來做路由的話，原來的錨點功能就不能用了。其次，hash 的傳參是基於 url 的，如果要傳遞復雜的數據，會有體積的限制，而 history 模式不僅可以在url里放參數，還可以將數據存放在一個特定的對象中。

history 模式改變 url 的方式會導致瀏覽器向服務器發送請求，這不是我們想看到的，我們需要在服務器端做處理：如果匹配不到任何靜態資源，則應該始終返回同一個 html 頁面。

history 路由：監聽 url 中的路徑變化，需要客戶端和服務端共同的支持；

• back()：后退到上一個路由；
• forward()：前進到下一個路由，如果有的話；
• go(number)：進入到任意一個路由，正數為前進，負數為后退；
• pushState(obj, title, url)：前進到指定的 URL，不刷新頁面；
• replaceState(obj, title, url)：用 url 替換當前的路由，不刷新頁面；

 

const rawPushState = window.history.pushState;
window.history.pushState(state, title, url) {
rawPushState.apply(window.history, state); //改變路由歷史記錄
}
// state：需要保存的數據，這個數據在觸發popstate事件時，可以在event.state里獲取
 // title：標題，基本沒用，一般傳 null
 // url：設定新的歷史記錄的 url。新的 url 與當前 url 的 origin 必須是一樣的，否則會拋出錯誤。url可以是絕對路徑，也可以是相對路徑。
//如 當前url是 https://www.baidu.com/a/,執行history.pushState(null, null, './qq/')，則變成 https://www.baidu.com/a/qq/，
//執行history.pushState(null, null, '/qq/')，則變成 https://www.baidu.com/qq/

const rawReplaceState = window.history.replaceState;
 window.history.replaceState(state, title, url){
rawReplaceState.apply(window.history, state)
}
 // 與 pushState 基本相同，但她是修改當前歷史記錄，而 pushState 是創建新的歷史記錄
 
 window.addEventListener("popstate", function() {
     // 監聽瀏覽器前進后退事件，pushState 與 replaceState 方法不會觸發              
 });

總結

hash模式和history模式的區別:

1、hash模式較丑，history模式較優雅;
2、pushState設置的新URL可以是與當前URL同源的任意URL；而hash只可修改#后面的部分，故只可設置與當前同文檔的URL;
3、pushState設置的新URL可以與當前URL一模一樣，這樣也會把記錄添加到棧中；而hash設置的新值必須與原來不一樣才會觸發記錄添加到棧中;
4、pushState通過stateObject可以添加任意類型的數據到記錄中；而hash只可添加短字符串;
5、pushState可額外設置title屬性供后續使用;
6、hash兼容IE8以上，history兼容IE10以上;
7、history模式需要后端配合將所有訪問都指向index.html，否則用戶刷新頁面，會導致404錯誤。