vue-router的兩種模式的區(qū)別
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)容
優(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ù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了vue中post請求以a=a&b=b 的格式寫遇到的問題,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了Vue 路由組件傳參的 8 種方式,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03
因?yàn)槌绦虻恼{(diào)試非常重要,程序猿可以利用好的調(diào)試方法去查找定位自己的問題所在之處,從而,達(dá)到糾正自己程序錯(cuò)誤的地方,健壯自己的程序,讓問題變得越來越少,程序變得越來越健康,所以本文給大家介紹了Vue程序調(diào)試和排錯(cuò)技巧,需要的朋友可以參考下2024-12-12
vue實(shí)現(xiàn)樣式之間的切換及vue動態(tài)樣式的實(shí)現(xiàn)方法
這篇文章主要介紹了vue中如何實(shí)現(xiàn)樣式之間的切換及vue動態(tài)樣式的實(shí)現(xiàn)方法，本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-12-12
Vue實(shí)現(xiàn)Echarts圖表寬高自適應(yīng)的實(shí)踐
本文主要介紹了Vue實(shí)現(xiàn)Echarts圖表寬高自適應(yīng)的實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了Vue的全局過濾器和私有過濾器的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
手寫可拖動穿梭框組件CustormTransfer vue實(shí)現(xiàn)示例
這篇文章主要為大家介紹了手寫可拖動穿梭框組件CustormTransfer vue實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
VUE3中h()函數(shù)和createVNode()函數(shù)的使用解讀
這篇文章主要介紹了VUE3中h()函數(shù)和createVNode()函數(shù)的使用解讀，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue中實(shí)現(xiàn)動畫效果的多種方法小結(jié)
平時(shí)我們能在網(wǎng)頁上看到很多動畫效果,這些效果看起來就很引人注目,我們是不是也可以在自己的項(xiàng)目中添加一些動畫效果,讓我們的頁面看起來更加的高端大氣上檔次,博人眼球,所以本文給大家介紹了Vue中實(shí)現(xiàn)動畫效果的多種方法,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue中的文字換行問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09