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