詳解如何去除vue項(xiàng)目中的#——History模式
使用vue-cli搭建的環(huán)境,在配置好路由之后,可以看到下面的情況:
但是不難發(fā)現(xiàn)#的出現(xiàn)真的很丑陋,并且也不知道這是什么作用?
所以就去Stack Overflow上搜索了,果然還有~ 看來(lái)Stack Overflow是真的強(qiáng)大,你在項(xiàng)目中遇到的問(wèn)題實(shí)際上在so上都已經(jīng)被問(wèn)過(guò)并且解決了,這不:

這是最高票的回答,即在vue2中將mode模式設(shè)置為history,試過(guò)之后確實(shí)奏效!
但是知道這樣可以解決問(wèn)題,卻不知道為什么,這是不行的, 隨著連接,我們看到了文檔。
所以這篇文章也就是引申到文檔的理解了,大家可以直接去看文檔?!?/p>
對(duì)于vue開(kāi)發(fā)的單頁(yè)面應(yīng)用,我們?cè)谇袚Q不同的頁(yè)面的時(shí)候,可以發(fā)現(xiàn)html永遠(yuǎn)只有一個(gè),這也真是稱之為單頁(yè)面的原因,而vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來(lái)模擬一個(gè)完整的 URL,于是當(dāng) URL 改變時(shí),頁(yè)面不會(huì)重新加載。因?yàn)閷?duì)于正常的頁(yè)面來(lái)說(shuō),更換url一定是會(huì)導(dǎo)致頁(yè)面的更換的, 而只有更換url中的查詢字符串和hash值得時(shí)候才不會(huì)重新加載頁(yè)面。 這里也就是這個(gè)道理。
但是#這種形式真的很丑! 所以,如果不想要,可以使用路由的history模式?。。?這種模式充分利用了history.pushState API來(lái)完成URL的跳轉(zhuǎn)而不需要重新加載頁(yè)面。
const router = new VueRouter({
mode: 'history',
routes: [...]
})
使用這種模式之后,就沒(méi)有#了,而是可以像使用正常的url進(jìn)行訪問(wèn)了。
不過(guò)這種模式要玩好,還需要后臺(tái)配置支持。因?yàn)槲覀兊膽?yīng)用是個(gè)單頁(yè)客戶端應(yīng)用,如果后臺(tái)沒(méi)有正確的配置,當(dāng)用戶在瀏覽器直接訪問(wèn) http://oursite.com/user/id 就會(huì)返回 404,這就不好看了。
所以呢,你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源:如果 URL 匹配不到任何靜態(tài)資源,則應(yīng)該返回同一個(gè) index.html 頁(yè)面,這個(gè)頁(yè)面就是你 app 依賴的頁(yè)面。
注意:目前我所做的項(xiàng)目的后端沒(méi)有支持此種方式,所以還是先使用#的方式進(jìn)行開(kāi)發(fā)。
警告
給個(gè)警告,因?yàn)檫@么做以后,你的服務(wù)器就不再返回 404 錯(cuò)誤頁(yè)面,因?yàn)閷?duì)于所有路徑都會(huì)返回 index.html 文件。為了避免這種情況,你應(yīng)該在 Vue 應(yīng)用里面覆蓋所有的路由情況,然后在給出一個(gè) 404 頁(yè)面。
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }
]
})
或者,如果你是用 Node.js 作后臺(tái),可以使用服務(wù)端的路由來(lái)匹配 URL,當(dāng)沒(méi)有匹配到路由的時(shí)候返回 404,從而實(shí)現(xiàn) fallback。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)高德地圖添加多個(gè)點(diǎn)標(biāo)記
地圖多點(diǎn)標(biāo)注其實(shí)是個(gè)非常簡(jiǎn)單的問(wèn)題,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)高德地圖添加多個(gè)點(diǎn)標(biāo)記的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Vue.js路由實(shí)現(xiàn)選項(xiàng)卡簡(jiǎn)單實(shí)例
這篇文章主要為大家詳細(xì)介紹了Vue.js路由實(shí)現(xiàn)選項(xiàng)卡簡(jiǎn)單實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07
Element-ui中元素滾動(dòng)時(shí)el-option超出元素區(qū)域的問(wèn)題
這篇文章主要介紹了Element-ui中元素滾動(dòng)時(shí)el-option超出元素區(qū)域的問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
vue引入js數(shù)字小鍵盤(pán)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue引入js數(shù)字小鍵盤(pán)的實(shí)現(xiàn)代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05
vue實(shí)現(xiàn)列表滾動(dòng)的過(guò)渡動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表滾動(dòng)的過(guò)渡動(dòng)畫(huà),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06
vue簡(jiǎn)單練習(xí) 桌面時(shí)鐘的實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了vue簡(jiǎn)單練習(xí) 桌面時(shí)鐘的實(shí)現(xiàn)代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值的相關(guān)資料,需要的朋友可以參考下2019-09-09
你了解vue3.0響應(yīng)式數(shù)據(jù)怎么實(shí)現(xiàn)嗎
這篇文章主要介紹了你了解vue3.0響應(yīng)式數(shù)據(jù)怎么實(shí)現(xiàn)嗎,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06

