vue-router中hash模式與history模式的區(qū)別
vue-router有兩種模式
- hash模式
- history模式
1.單頁(yè)面應(yīng)用
單頁(yè)應(yīng)用
1.只有一個(gè)html文件,整個(gè)網(wǎng)站的所有內(nèi)容都在這一個(gè)html里,通過js來處理
2.不僅僅是在頁(yè)面交互是無(wú)刷新的,連頁(yè)面跳轉(zhuǎn)都是無(wú)刷新的。為了實(shí)現(xiàn)單頁(yè)應(yīng)用 ==> 前后端分離 + 前端路由。(更新視圖但不重新請(qǐng)求頁(yè)面)
前端路由
實(shí)現(xiàn)起來其實(shí)也很簡(jiǎn)單,就是匹配不同的 url 路徑,進(jìn)行解析,加載不同的組件,然后動(dòng)態(tài)的渲染出區(qū)域 html 內(nèi)容。
優(yōu)點(diǎn)
良好的交互體驗(yàn),用戶不需要刷新頁(yè)面,頁(yè)面顯示流暢, 良好的前后端工作分離模式,減輕服務(wù)器壓力,
缺點(diǎn)
不利于SEO,初次加載耗時(shí)比較多
2.hash模式
原理:是onhashchange事件,可以在window對(duì)象上監(jiān)聽這個(gè)事件
vue-router默認(rèn)的是hash模式
1.使用URL的hash來模擬一個(gè)完整的URL
2.當(dāng)URL改變的時(shí)候,頁(yè)面不會(huì)重新加載,也就是單頁(yè)應(yīng)用了
2.當(dāng)#后面的hash發(fā)生變化,不會(huì)導(dǎo)致瀏覽器向服務(wù)器發(fā)出請(qǐng)求,瀏覽器不發(fā)出請(qǐng)求就不會(huì)刷新頁(yè)面,并且會(huì)觸發(fā)hasChange這個(gè)事件,通過監(jiān)聽hash值的變化來實(shí)現(xiàn)更新頁(yè)面部分內(nèi)容的操作
window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.color = hash; }
對(duì)于hash模式會(huì)創(chuàng)建hashHistory對(duì)象,在訪問不同的路由的時(shí)候,會(huì)發(fā)生兩件事:
1.HashHistory.push()將新的路由添加到瀏覽器訪問的歷史的棧頂,
2.HasHistory.replace()替換到當(dāng)前棧頂?shù)穆酚?/p>
3.history模式
隨著history api的到來,前端路由開始進(jìn)化了,前面的hashchange,你只能改變#后面的url片段,而history api則給了前端完全的自由
- history api可以分為兩大部分:切換和修改
3.1 切換歷史狀態(tài)
包括back,forward,go三個(gè)方法
對(duì)應(yīng)瀏覽器的前進(jìn),后退,跳轉(zhuǎn)操作
例如:(谷歌)瀏覽器只有前進(jìn)和后退,沒有跳轉(zhuǎn),嗯,在前進(jìn)后退上長(zhǎng)按鼠標(biāo),會(huì)出來所有當(dāng)前窗口的歷史記錄,從而可以跳轉(zhuǎn)(也許叫跳更合適):
history.go(-2);//后退兩次 history.go(2);//前進(jìn)兩次 history.back(); //后退 hsitory.forward(); //前進(jìn)
3.2 修改歷史狀態(tài)
包括了pushState,replaceState兩個(gè)方法
這兩個(gè)方法接收三個(gè)參數(shù):stateObj,title,url
history.pushState({color:'red'}, 'red', 'red'}) window.onpopstate = function(event){ console.log(event.state) if(event.state && event.state.color === 'red'){ document.body.style.color = 'red'; } } history.back(); history.forward();
步驟
1.通過pushstate把頁(yè)面的狀態(tài)保存在state對(duì)象中
2.當(dāng)頁(yè)面的url再變回這個(gè)url時(shí),可以通過event.state取到這個(gè)state對(duì)象
3.從而可以對(duì)頁(yè)面狀態(tài)進(jìn)行還原
4.這里的頁(yè)面狀態(tài)就是頁(yè)面字體顏色,其實(shí)滾動(dòng)條的位置,閱讀進(jìn)度,組件的開關(guān)的這些頁(yè)面狀態(tài)都可以存儲(chǔ)到state的里面。
3.3 history模式怕啥
hash 和 history 的區(qū)別
history 模式
1.通過history api,我們丟掉了丑陋的#,但是它也有個(gè)毛病
2.不怕前進(jìn),不怕后退,就怕刷新,f5
——history模式會(huì)將URL修改得就和正常請(qǐng)求后端的URL一樣,如后端沒有配置對(duì)應(yīng)/user/id的路由處理,則會(huì)返回404錯(cuò)誤
——所以這個(gè)實(shí)現(xiàn)需要服務(wù)器的支持,需要把所有路由都重定向到根頁(yè)面。
ash模式下
1.前面的hashchange,你只能改變#后面的url片段。而pushState設(shè)置的新URL可以是與當(dāng)前URL同源的任意URL。
2.前端路由修改的是#中的信息,而瀏覽器請(qǐng)求時(shí)是不帶它玩的,所以沒有問題.但是在history下,你可以自由的修改path,當(dāng)刷新時(shí),如果服務(wù)器中沒有相應(yīng)的響應(yīng)或者資源,會(huì)分分鐘刷出一個(gè)404來。
總結(jié)
到此這篇關(guān)于vue-router中hash模式與history模式區(qū)別的文章就介紹到這了,更多相關(guān)vue-router模式區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中的.$mount(''#app'')手動(dòng)掛載操作
這篇文章主要介紹了vue中.$mount('#app')手動(dòng)掛載操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09Element修改彈窗類組件的層級(jí)的實(shí)現(xiàn)
本文主要介紹了Element修改彈窗類組件的層級(jí)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04如何解決ElementUI導(dǎo)航欄重復(fù)點(diǎn)菜單報(bào)錯(cuò)問題
這篇文章主要介紹了如何解決ElementUI導(dǎo)航欄重復(fù)點(diǎn)菜單報(bào)錯(cuò)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07安裝vue無(wú)法運(yùn)行、此系統(tǒng)無(wú)法運(yùn)行腳本問題及解決
這篇文章主要介紹了安裝vue無(wú)法運(yùn)行、此系統(tǒng)無(wú)法運(yùn)行腳本問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03前端實(shí)現(xiàn)pdf預(yù)覽功能的全過程(基于vue)
這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)pdf預(yù)覽功能的相關(guān)資料,前端實(shí)現(xiàn)預(yù)覽最好的效果還是PDF,不會(huì)出現(xiàn)一些文字錯(cuò)亂和亂碼的問題,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09vue3使用axios并封裝axios請(qǐng)求的詳細(xì)步驟
本篇文章分步驟給大家介紹了vue3使用axios并封裝axios請(qǐng)求的詳細(xì)步驟,結(jié)合實(shí)例代碼給大家講解的非常詳細(xì),需要的朋友參考下吧2023-06-06element中一個(gè)單選框radio時(shí)的選中和取消代碼詳解
這篇文章主要給大家介紹了關(guān)于element中一個(gè)單選框radio時(shí)的選中和取消的相關(guān)資料,文中通過圖文以及代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考價(jià)值,需要的朋友可以參考下2023-09-09