前端路由的兩種模式：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變化，點擊瀏覽器的前進後退會觸發
})

View Code

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能夠查看當前歷史堆棧中頁面的數量

View Code