為了構(gòu)建 SPA（單頁面應(yīng)用）
前端路由的核心值依，
改變視圖的同時(shí)不會(huì)向后端發(fā)出請(qǐng)求
前端路由模式有兩種：
hash 模式 和 history 模式
兩者分別利用瀏覽器自由特性
實(shí)現(xiàn)單頁面導(dǎo)航
hash 模式：
window.location 或 a 標(biāo)簽改變錨點(diǎn)值碟案，
window.hashchange() 監(jiān)聽錨點(diǎn)變化
history 模式：
history.pushState()、history.replaceState() 定義目標(biāo)路由，
window.onpopstate() 監(jiān)聽瀏覽器操作導(dǎo)致的 URL 變化
React Router 匹配路由由 mathPath 通過 path-to-regexp 進(jìn)行风秤，
<Route> 相當(dāng)于一個(gè)高階組件扮叨，
以不同的優(yōu)先級(jí)和匹配模式渲染匹配到的子組件
hash
url #
history
HTML5 History - pushState() 和 replaceState()
history.pushState URL 跳轉(zhuǎn)而無須重新加載頁面
相比于直接修改 hash，存在以下優(yōu)勢(shì):
新 URL 可以是與當(dāng)前 URL 同源的任意 URL碍沐；
只可修改 # 后面的部分衷蜓，
因此只能設(shè)置與當(dāng)前 URL 同文檔的 URL；
新 URL 可以與當(dāng)前 URL 一模一樣磁浇，這樣也會(huì)把記錄添加到棧中；
新值必須與原來不一樣才會(huì)觸發(fā)動(dòng)作將記錄添加到棧中无虚；
通過 stateObject 參數(shù)可以添加任意類型的數(shù)據(jù)到記錄中交洗；
只可添加短字符串；
pushState() 可額外設(shè)置 title 屬性供后續(xù)使用构拳。
SPA 雖然在瀏覽器里游刃有余，
但真要通過 URL 向后端發(fā)起 HTTP 請(qǐng)求時(shí)斗埂，
兩者的差異就來了凫海。
尤其在用戶手動(dòng)輸入 URL 后回車，
或者刷新（重啟）瀏覽器的時(shí)候行贪。
個(gè)人在接入微信的一個(gè)活動(dòng)開發(fā)過程中
開始使用的hash模式，
但是后面后端無法獲取到我#后面的url參數(shù)崭捍，
于是就把參數(shù)寫在#前面啰脚，
但是討論后還是決定去掉這個(gè)巨丑的#
于是乎改用history模式，
但是開始跑流程的時(shí)候是沒問題，
但是后來發(fā)現(xiàn)跳轉(zhuǎn)后刷新或者回跳亮航，
會(huì)報(bào)一個(gè)404的錯(cuò)誤匀们，找不到指定的路由,
最后后端去指向正確的路由
加了/hd/xxx 去匹配是否有這個(gè)/hd/{:path}
才得以解決
總結(jié)**
1 hash 模式下，
僅 hash 符號(hào)之前的內(nèi)容會(huì)被包含在請(qǐng)求中宴猾，
如 [http://www.abc.com](https://link.zhihu.com/?target=http%3A//www.abc.com)，
因此對(duì)于后端來說仇哆，
即使沒有做到對(duì)路由的全覆蓋夫植，
也不會(huì)返回 404 錯(cuò)誤。
2 history 模式下延欠，
前端的 URL 必須和實(shí)際向后端發(fā)起請(qǐng)求的 URL 一致，
如[http://www.abc.com/book/id](https://link.zhihu.com/?target=http%3A//www.abc.com/book/id)
如果后端缺少對(duì) /book/id 的路由處理由捎，
將返回 404 錯(cuò)誤饿凛。
Vue-Router 官網(wǎng)里如此描述：
“不過這種模式要玩好，還需要后臺(tái)配置支持……
所以呢心肪，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：
如果 URL 匹配不到任何靜態(tài)資源，
則應(yīng)該返回同一個(gè) index.html 頁面硬鞍，
這個(gè)頁面就是你 app 依賴的頁面戴已。”
3 結(jié)合自身例子糖儡，
對(duì)于一般的 Vue + Vue-Router + Webpack + XXX 形式的 Web 開發(fā)場景，
用 history 模式即可著淆，
只需在后端（Apache 或 Nginx）進(jìn)行簡單的路由配置拴疤，
同時(shí)搭配前端路由的 404 頁面支持。
