您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)如何解決vue router使用history模式刷新后404問題,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
因?yàn)槲覀兊膽?yīng)用是單頁(yè)客戶端應(yīng)用,當(dāng)使用 history 模式時(shí),URL 就像正常的 url,可以直接訪問http://www.xxx.com/user/id,但是因?yàn)関ue-router設(shè)置的路徑不是真實(shí)存在的路徑,所以刷新就會(huì)返回404錯(cuò)誤。
想要history模式正常訪問,還需要后臺(tái)配置支持。要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源:如果 URL 匹配不到任何靜態(tài)資源,則應(yīng)該返回同一個(gè) index.html 頁(yè)面,這個(gè)頁(yè)面就是你 app 依賴的頁(yè)面。
也就是在服務(wù)端修改404錯(cuò)誤頁(yè)面的配置路徑,讓其指向到index.html。
警告:
因?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 } ] })
如此便解決了頁(yè)面刷新后404問題。
問題延伸:
但是后面又發(fā)現(xiàn),在IE瀏覽器下刷新仍然還是404,在網(wǎng)上找了一下原因,是因?yàn)镮E自作聰明,對(duì)錯(cuò)誤頁(yè)面的處理在ie來(lái)看頁(yè)面大小<1024b 會(huì)被認(rèn)為十分不友好,所以ie就將改頁(yè)面給替換成自己的錯(cuò)誤提示頁(yè)面了,而我的index.html剛好只有一個(gè)DIV:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue-mdm</title> </head> <body> <div id="app"></div> </div> </body> </html>
解決辦法就是充實(shí)一下頁(yè)面,讓大小超過1024即可。
關(guān)于“如何解決vue router使用history模式刷新后404問題”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。