大家都知道vue是一種單頁應(yīng)用,單頁應(yīng)用就是僅在頁面初始化的時(shí)候加載相應(yīng)的html/css/js一單頁面加載完成,不會(huì)因?yàn)橛脩舻牟僮鞫M(jìn)行頁面的重新加載或者跳轉(zhuǎn),用javascript動(dòng)態(tài)的變化html的內(nèi)容
優(yōu)點(diǎn): 良好的交互體驗(yàn),用戶不需要刷新頁面,頁面顯示流暢, 良好的前后端工作分離模式,減輕服務(wù)器壓力,
缺點(diǎn): 不利于SEO,初次加載耗時(shí)比較多
1.hash模式
vue-router默認(rèn)的是hash模式—使用URL的hash來模擬一個(gè)完整的URL,于是當(dāng)URL改變的時(shí)候,頁面不會(huì)重新加載,也就是單頁應(yīng)用了,當(dāng)#后面的hash發(fā)生變化,不會(huì)導(dǎo)致瀏覽器向服務(wù)器發(fā)出請(qǐng)求,瀏覽器不發(fā)出請(qǐng)求就不會(huì)刷新頁面,并且會(huì)觸發(fā)hasChange這個(gè)事件,通過監(jiān)聽hash值的變化來實(shí)現(xiàn)更新頁面部分內(nèi)容的操作
比如這個(gè)URL：http://www.baidu.com/#/hello, hash 的值為#/hello。它的特點(diǎn)在于：hash 雖然出現(xiàn)URL中预厌，但不會(huì)被包含在HTTP請(qǐng)求中阿迈，對(duì)后端完全沒有影響，因此改變hash不會(huì)重新加載頁面轧叽。
對(duì)于hash模式會(huì)創(chuàng)建hashHistory對(duì)象,在訪問不同的路由的時(shí)候,會(huì)發(fā)生兩件事:
HashHistory.push()將新的路由添加到瀏覽器訪問的歷史的棧頂,和HasHistory.replace()替換到當(dāng)前棧頂?shù)穆酚?/p>
2.history模式
主要使用HTML5的pushState()和replaceState()這兩個(gè)api來實(shí)現(xiàn)的,pushState()可以改變url地址且不會(huì)發(fā)送請(qǐng)求,replaceState()可以讀取歷史記錄棧,還可以對(duì)瀏覽器記錄進(jìn)行修改
這兩個(gè)方法應(yīng)用于瀏覽器的歷史記錄站苗沧，在當(dāng)前已有的back、forward炭晒、go 的基礎(chǔ)之上待逞，它們提供了對(duì)歷史記錄進(jìn)行修改的功能。只是當(dāng)它們執(zhí)行修改是腰埂，雖然改變了當(dāng)前的URL飒焦，但你瀏覽器不會(huì)立即向后端發(fā)送請(qǐng)求。
window.history.pushState(stateObject, title, URL)
window.history.replaceState(stateObject, title, URL)
包括back,forward , go 三個(gè)方法
history.go(-2);//后退兩次
history.go(2);//前進(jìn)兩次
history.back(); //后退
hsitory.forward(); //前進(jìn)
區(qū)別：
前面的hashchange屿笼，你只能改變#后面的url片段牺荠。而pushState設(shè)置的新URL可以是與當(dāng)前URL同源的任意URL。
history模式則會(huì)將URL修改得就和正常請(qǐng)求后端的URL一樣,如后端沒有配置對(duì)應(yīng)/user/id的路由處理驴一，則會(huì)返回404錯(cuò)誤
404錯(cuò)誤
1休雌、hash模式下，僅hash符號(hào)之前的內(nèi)容會(huì)被包含在請(qǐng)求中肝断，如 http://www.abc.com, 因此對(duì)于后端來說杈曲，即使沒有做到對(duì)路由的全覆蓋，也不會(huì)返回404錯(cuò)誤胸懈；
2担扑、history模式下，前端的url必須和實(shí)際向后端發(fā)起請(qǐng)求的url 一致趣钱，如http://www.abc.com/book/id 涌献。如果后端缺少對(duì)/book/id 的路由處理，將返回404錯(cuò)誤首有。
原理
hash的原理是采用hashchange事件燕垃，
可以在window監(jiān)聽hash的變化枢劝。我們?cè)趗rl后面隨便添加一個(gè)#xx觸發(fā)這個(gè)事件。
history的原理是H5的幾個(gè)新API
history.pushState(data,title,url)：在瀏覽器中新增一條歷史記錄卜壕；
data會(huì)在onpopstate事件觸發(fā)時(shí)作為參數(shù)傳遞過去您旁，title為頁面標(biāo)題，url為頁面地址轴捎；
history.replaceState(data,title,url)：在瀏覽器中替換當(dāng)前歷史記錄鹤盒；
data會(huì)在onpopstate事件觸發(fā)時(shí)作為參數(shù)傳遞過去，title為頁面標(biāo)題轮蜕，url為頁面地址昨悼；
history.length()：當(dāng)前歷史列表中的歷史記錄條數(shù)；
window.onpopstate：實(shí)際上popstate是一個(gè)瀏覽器內(nèi)置的點(diǎn)擊事件跃洛，響應(yīng)pushState和replaceState的觸發(fā)調(diào)用；
history.back(-1):返回到當(dāng)前頁的上一頁(原頁面表單中的內(nèi)容會(huì)保留)
history.back(0):頁面刷新
history.back(1):當(dāng)前頁前進(jìn)一頁
history.go(-1): 返回到當(dāng)前頁的上一頁(原頁面表單中的內(nèi)容會(huì)丟失终议，效果基本和history.back(-1)一樣
history.forward():當(dāng)前頁面前進(jìn)一頁(和history.back(1)效果一樣
此外汇竭，history方法可以直接調(diào)用，例：history.pushState()穴张，也可以用window.history.pushState()來調(diào)用细燎。因?yàn)閔istory是屬于瀏覽器中的子對(duì)象，兩種調(diào)用方法都是生效的皂甘；
參考來源：https://www.jb51.net/article/162223.htm
https://blog.csdn.net/Edasi/article/details/107980498
