1、大家都知道vue是一種單頁應(yīng)用,單頁應(yīng)用就是僅在頁面初始化的時(shí)候加載相應(yīng)的html/css/js一單頁面加載完成,不會因?yàn)橛脩舻牟僮鞫M(jìn)行頁面的重新加載或者跳轉(zhuǎn),用javascript動態(tài)的變化html的內(nèi)容

創(chuàng)新互聯(lián)長期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為張家川回族自治企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)制作、網(wǎng)站制作，張家川回族自治網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

優(yōu)點(diǎn): 良好的交互體驗(yàn),用戶不需要刷新頁面,頁面顯示流暢, 良好的前后端工作分離模式,減輕服務(wù)器壓力,
缺點(diǎn): 不利于SEO,初次加載耗時(shí)比較多

2、hash模式

vue-router默認(rèn)的是hash模式—使用URL的hash來模擬一個(gè)完整的URL,于是當(dāng)URL改變的時(shí)候,頁面不會重新加載,也就是單頁應(yīng)用了,當(dāng)#后面的hash發(fā)生變化,不會導(dǎo)致瀏覽器向服務(wù)器發(fā)出請求,瀏覽器不發(fā)出請求就不會刷新頁面,并且會觸發(fā)hasChange這個(gè)事件,通過監(jiān)聽hash值的變化來實(shí)現(xiàn)更新頁面部分內(nèi)容的操作

對于hash模式會創(chuàng)建hashHistory對象,在訪問不同的路由的時(shí)候,會發(fā)生兩件事:
HashHistory.push()將新的路由添加到瀏覽器訪問的歷史的棧頂,和HasHistory.replace()替換到當(dāng)前棧頂?shù)穆酚?/p>

3、history模式

主要使用HTML5的pushState()和replaceState()這兩個(gè)api來實(shí)現(xiàn)的,pushState()可以改變url地址且不會發(fā)送請求,replaceState()可以讀取歷史記錄棧,還可以對瀏覽器記錄進(jìn)行修改

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模式則會將URL修改得就和正常請求后端的URL一樣,如后端沒有配置對應(yīng)/user/id的路由處理，則會返回404錯(cuò)誤

總結(jié)

以上所述是小編給大家介紹的vue-router的兩種模式的區(qū)別,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！