vue-router的兩種模式的區(qū)別
1、大家都知道vue是一種單頁(yè)應(yīng)用,單頁(yè)應(yīng)用就是僅在頁(yè)面初始化的時(shí)候加載相應(yīng)的html/css/js一單頁(yè)面加載完成,不會(huì)因?yàn)橛脩舻牟僮鞫M(jìn)行頁(yè)面的重新加載或者跳轉(zhuǎn),用javascript動(dòng)態(tài)的變化html的內(nèi)容
優(yōu)點(diǎn): 良好的交互體驗(yàn),用戶不需要刷新頁(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ì)象,在訪問(wèn)不同的路由的時(shí)候,會(huì)發(fā)生兩件事:
HashHistory.push()將新的路由添加到瀏覽器訪問(wèn)的歷史的棧頂,和HasHistory.replace()替換到當(dāng)前棧頂?shù)穆酚?/p>
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ò)誤
總結(jié)
以上所述是小編給大家介紹的vue-router的兩種模式的區(qū)別,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
vue 跳轉(zhuǎn)到其他頁(yè)面并關(guān)閉當(dāng)前頁(yè)面的實(shí)現(xiàn)代碼
我在做一個(gè)調(diào)用虛擬機(jī)錄屏的一個(gè)操作,需要在瀏覽器頁(yè)面上,點(diǎn)擊按鈕后,關(guān)閉當(dāng)前頁(yè)面里的某一個(gè)頁(yè)面,并且打開(kāi)瀏覽器新頁(yè)面是虛擬機(jī)的頁(yè)面,本文給大家介紹vue 跳轉(zhuǎn)到其他頁(yè)面并關(guān)閉當(dāng)前頁(yè)面的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2023-09-09
如何解決this.$refs.form.validate()不執(zhí)行的問(wèn)題
這篇文章主要介紹了如何解決this.$refs.form.validate()不執(zhí)行的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
element的el-table中記錄滾動(dòng)條位置的示例代碼
這篇文章主要介紹了element的el-table中記錄滾動(dòng)條位置的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
在vue中使用回調(diào)函數(shù),this調(diào)用無(wú)效的解決
這篇文章主要介紹了在vue中使用回調(diào)函數(shù),this調(diào)用無(wú)效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue的實(shí)例、生命周期與Vue腳手架（vue-cli）實(shí)例詳解
本文通過(guò)實(shí)例代碼+圖片描述的形式給大家介紹了Vue的實(shí)例、生命周期與Vue腳手架（vue-cli）知識(shí),需要的朋友可以參考下2017-12-12
詳解Vue template 如何支持多個(gè)根結(jié)點(diǎn)
這篇文章主要介紹了詳解Vue template 如何支持多個(gè)根結(jié)點(diǎn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了微信小程序用戶盒子、宮格列表,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了vue運(yùn)行卡死的問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
本文主要介紹了vuex命名空間的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
element-ui?table使用type='selection'復(fù)選框全禁用(全選禁用)詳解
element-ui中的table的多選很好用,但是如果其中某一項(xiàng)禁止選擇,該怎樣操作呢,下面這篇文章主要給大家介紹了關(guān)于element-ui?table使用type='selection'復(fù)選框全禁用(全選禁用)的相關(guān)資料,需要的朋友可以參考下2023-01-01