前端路由的兩種模式：hash模式和history模式

hash模式

這里的hash是指url尾巴后的#號及后面的字符。這里的#和css里的#是一個意思。hash也稱作錨點，本身是用來做頁面定位的，她可以使對應id的元素顯示在可是區域內。由於hash值變化不會導致瀏覽器向服務器發出請求，而且hash改變會觸發hashchange事件，瀏覽器的進后退也能對其進行控制，所以人們在 html5 的 history 出現前，基本都是使用 hash 來實現前端路由的。

改變#不觸發網頁加載

http://www.example.com/index.html#location1 
// 改成
http://www.example.com/index.html#location

瀏覽器不會重新向服務器請求index.html 

使用到的api:

window.location.hash = 'qq' // 設置 url 的 hash，會在當前url后加上 '#qq'

var hash = window.location.hash // '#qq'  

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

history模式

 

HTML5規范提供了history.pushState和history.replaceState來進行路由控制。通過這兩個方法可以改變url且不向服務器發送請求。同時不會像hash有一個#,更加的美觀。但是history路由需要服務器的支持，並且需將所有的路由重定向倒根頁面。

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

vue-router默認hash模式，使用 URL 的 hash 來模擬一個完整的 URL，於是當 URL 改變時，頁面不會重新加載。

不過這種模式要玩好，還需要后台配置支持。因為我們的應用是個單頁客戶端應用，如果后台沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404，這就不好看了。

所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個index.html 頁面，這個頁面就是你 app 依賴的頁面。

相關API:

window.history.pushState(state, title, url) 
// 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/

window.history.replaceState(state, title, url)
// 與 pushState 基本相同，但她是修改當前歷史記錄，而 pushState 是創建新的歷史記錄

window.addEventListener("popstate", function() {
    // 監聽瀏覽器前進后退事件，pushState 與 replaceState 方法不會觸發              
});

window.history.back() // 后退
window.history.forward() // 前進
window.history.go(1) // 前進一步，-2為后退兩步，window.history.lengthk可以查看當前歷史堆棧中頁面的數量