參考鏈接：
http://www.reibang.com/p/4295aec31302
https://router.vuejs.org/zh/guide/
一、vue router 原理
vue-router通過 hash 喝 history interface 兩種方式實現(xiàn)前端路由，更新視圖但補充鋅請求頁面-是前端路由原理的核心之一凹炸，目前瀏覽器環(huán)境中這一功能的實現(xiàn)主要有兩種方式：
1秘案、hash --- 利用 URL 中的 hash（‘#’）
2夜郁、利用 History interface 在 HTML5 中新增的方法
在 vue-router中，它提供 mode 參數(shù)來決定采用哪一種方式吏祸，選擇流程如下：
mode參數(shù)：
- 默認 hash
- histroy 注：如果瀏覽器不支持 history 新特性，則采用 hash 方式
- 如果不在瀏覽器環(huán)境則使用 abstract（node環(huán)境下）
區(qū)別：
1钩蚊、mode：‘hash’贡翘，多了‘#’
http://localhost:8080/#/index
2蹈矮、mode：‘history’
http://localhost:8080/index
當(dāng)選擇 mode 類型之后，程序會根據(jù)你選擇的 mode 類型創(chuàng)建不同的 history 對象（HashHistory/HTML5History/AbstractHistory）
HashHistory
1床估、HashHistory.push()：將新路由添加到瀏覽器訪問歷史的棧頂
從設(shè)置路由改變到視圖更新的流程：
$router.push() --> HashHistory.push() --> Histroy.transitionTo() --> History.updateRoute() --> {app._route=route} --> vm.render()
解析：
1 $router.push() //調(diào)用方法
2 HashHistory.push() //根據(jù)hash模式調(diào)用,設(shè)置hash并添加到瀏覽器歷史記錄（添加到棧頂）（window.location.hash= XXX）
3 History.transitionTo() //監(jiān)測更新含滴，更新則調(diào)用History.updateRoute()
4 History.updateRoute() //更新路由
5 {app._route= route} //替換當(dāng)前app路由
6 vm.render() //更新視圖
2、HashHistory.replace()
replace() 方法與 push() 方法不同之處在于丐巫，他并不是將新路由添加到瀏覽器訪問歷史的棧頂谈况，而是替換掉當(dāng)前的路由
replace (location: RawLocation, onComplete?: Function, onAbort?: Function) { this.transitionTo(location, route => { replaceHash(route.fullPath) onComplete && onComplete(route) }, onAbort)}
function replaceHash (path) { const i = window.location.href.indexOf('#') window.location.replace( window.location.href.slice(0, i >= 0 ? i : 0) + '#' + path )}
HTML5Histroy
History interface 是瀏覽器歷史記錄棧提供的接口，通過 back() forward() go() 等方法递胧，我們可以讀取瀏覽器歷史記錄棧的信息碑韵，進行各種跳轉(zhuǎn)操作。
從 HTML5 開始 History interface 有進一步更新：pashState() replaceState() 這下不僅是讀取了缎脾，還可以對瀏覽器歷史記錄棧進行更改：
window.history.pushState(stateObject, title, URL)
window.history.replaceState(stateObject, title, URL)
- stateObject：當(dāng)瀏覽器跳轉(zhuǎn)到新的狀態(tài)時祝闻，將觸發(fā) popState 時間，該事件將攜帶這個 stateObject 參數(shù)的副本
- title：所添加記錄的標(biāo)題
- URL：所添加記錄的url
1遗菠、push
與 hash 模式類似联喘，只是將 push 改為 history.pushState
2、replace
與 hash 模式類似辙纬，只是將window.replace改為history.replaceState
3豁遭、監(jiān)聽地址變化
在 HTML5History 的構(gòu)造函數(shù)中監(jiān)聽popState（window.onpopstate）
優(yōu)缺點：（推薦使用 history模式）
1、pushState() 設(shè)置的新 URL 可以是與當(dāng)前 URL 同源的任意 URL贺拣；而 hash 只可以修改 # 后面的部分蓖谢，故只可設(shè)置與當(dāng)前同文檔的URL
2、pushState() 通過 stateObject 可以添加任意類型的數(shù)據(jù)到記錄中譬涡；而 hash 只可以添加短字符串
3闪幽、pushState() 可以額外設(shè)置 title 屬性供后續(xù)使用
4、history 模式則會將 URL 修改的就像正常請求后端的 URL 一樣涡匀，如后端沒有配置對應(yīng) /user/id 的路由處理盯腌，則會返回404錯誤
二、
