Vue-router(前端路由)的兩種路由模式

Vue的兩種路由模式： hash、history；默認是hash模式； 前端路由（改變視圖的同時不會向后端發出請求）

一、什么是hash模式和history模式？

　　hash模式：是指url尾巴后的#號以及后面的字符。hash也稱為錨點，本身是用來做頁面定位的，它可以使對應的id元素顯示在可視區域。hash雖然出現在url中，但不會被包括在http請求中，對后端完全沒有影響，因此改變hash不會被重新加載頁面。

　　hash值的變化不會導致瀏覽器向服務器發出請求，而hash改變會觸發hashchange事件(只改變#后面的url片段)；hash發生變化url都會被瀏覽器記錄下來，從而可以使用瀏覽器的前進和后退。又稱為前端路由，單頁面應用的標配。

　　history模式：

二、hash和history模式背后的原理？

　　hash：hashchange事件，可以在window對象上監聽這個事件:

window.location.hash = 'qq'  // 設置url的hash，會在當前的url后加上'#qq'   
ar hash = window.location.hash  // 值為 '#qq'
window.addEventListener('hashchange',function() {
   // 監聽hash變化，點擊瀏覽器的前進后退會觸發     
})

　　history：利用了HTML5新增的pushState()和replaceState()方法，需要特定的瀏覽器支持；

　　--history 的api可以分為兩個部分：切換和修改（參考MDN）

　　--切換歷史狀態包括back\forward\go 方法： history.go()\history.forward()\history.back()

　　==修改歷史狀態包括pushState和replaceState兩個方法

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://baidu.com/qq/

window.history.replaceState(state,title,url)
// 與pushState方法一樣，但它是修改當前的歷史記錄，而pushState是創建新的歷史記錄


window.addEventListener('popstate',function(){
    // 監聽瀏覽器的前進和后退事件，pushState和replaceState方法不會觸發
    })
// history模式：改變url的方式會導致瀏覽器向服務器端發送請求，我們需要在服務器端做處理：如果匹配不到任何的靜態頁面，則應該始終返回同一個html頁面。搭配前端路由的404頁面支持。

　　hash和history都是屬於瀏覽器自身的特性，Vue-router只是利用了這兩個特性（通過調用瀏覽器接口）來實現前端路由。

三、缺點：

　　hash：

　　　　1.本來是拿來做頁面定位的，如果拿來做路由的話，原來的錨點功能就不能用了；

　　　　2.傳參是基於url的，如果傳遞復雜的數據，會又體積的限制，而history模式不僅可以在url里放參數，還可以將數據放在一個特定的對象中。

　　history：頁面F5書刷新時會出現404； 前端的 URL 必須和實際向后端發起請求的 URL 一致，否則會返回404錯誤。