2019-5-24 seo達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
1、大家都知道vue是一種單頁(yè)應(yīng)用,單頁(yè)應(yīng)用就是僅在頁(yè)面初始化的時(shí)候加載相應(yīng)的html/css/js一單頁(yè)面加載完成,不會(huì)因?yàn)橛脩?hù)的操作而進(jìn)行頁(yè)面的重新加載或者跳轉(zhuǎn),用javascript動(dòng)態(tài)的變化html的內(nèi)容
優(yōu)點(diǎn): 良好的交互體驗(yàn),用戶(hù)不需要刷新頁(yè)面,頁(yè)面顯示流暢, 良好的前后端工作分離模式,減輕服務(wù)器壓力,
缺點(diǎn): 不利于SEO,初次加載耗時(shí)比較多
2、hash模式
vue-router默認(rèn)的是hash模式—使用URL的hash來(lái)模擬一個(gè)完整的URL,于是當(dāng)URL改變的時(shí)候,頁(yè)面不會(huì)重新加載,也就是單頁(yè)應(yīng)用了,當(dāng)#后面的hash發(fā)生變化,不會(huì)導(dǎo)致瀏覽器向服務(wù)器發(fā)出請(qǐng)求,瀏覽器不發(fā)出請(qǐng)求就不會(huì)刷新頁(yè)面,并且會(huì)觸發(fā)hasChange這個(gè)事件,通過(guò)監(jiān)聽(tīng)hash值的變化來(lái)實(shí)現(xiàn)更新頁(yè)面部分內(nèi)容的操作
對(duì)于hash模式會(huì)創(chuàng)建hashHistory對(duì)象,在訪(fǎng)問(wèn)不同的路由的時(shí)候,會(huì)發(fā)生兩件事:
HashHistory.push()將新的路由添加到瀏覽器訪(fǎng)問(wèn)的歷史的棧頂,和HasHistory.replace()替換到當(dāng)前棧頂?shù)穆酚?
3、history模式
主要使用HTML5的pushState()和replaceState()這兩個(gè)api來(lái)實(shí)現(xiàn)的,pushState()可以改變url地址且不會(huì)發(fā)送請(qǐng)求,replaceState()可以讀取歷史記錄棧,還可以對(duì)瀏覽器記錄進(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模式則會(huì)將URL修改得就和正常請(qǐng)求后端的URL一樣,如后端沒(méi)有配置對(duì)應(yīng)/user/id的路由處理，則會(huì)返回404錯(cuò)誤
參考于: https://www.cnblogs.com/ceceliahappycoding/p/10552620.html
藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。藍(lán)藍(lán)設(shè)計(jì)的小編 http://bouu.cn