解決vue router使用 history 模式刷新后404問(wèn)題
因?yàn)槲覀兊膽?yīng)用是單頁(yè)客戶端應(yīng)用,當(dāng)使用 history 模式時(shí),URL 就像正常的 url,可以直接訪問(wèn)http://www.xxx.com/user/id,但是因?yàn)関ue-router設(shè)置的路徑不是真實(shí)存在的路徑,所以刷新就會(huì)返回404錯(cuò)誤。
想要history模式正常訪問(wèn),還需要后臺(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問(wèn)題。
問(wèn)題延伸:
但是后面又發(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è)面,讓大小超過(guò)1024即可。
總結(jié)
以上所述是小編給大家介紹的解決vue router使用 history 模式刷新后404問(wèn)題,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue中textarea自適應(yīng)高度方案的實(shí)現(xiàn)
本文主要介紹了Vue中textarea自適應(yīng)高度方案的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01Vue+jquery實(shí)現(xiàn)表格指定列的文字收縮的示例代碼
這篇文章主要介紹了Vue+jquery實(shí)現(xiàn)表格指定列的文字收縮的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01Vue3中引入SCSS和LESS依賴的基本步驟和注意事項(xiàng)
我們項(xiàng)目開(kāi)發(fā)中經(jīng)常遇到樣式里面會(huì)使用less和scss寫(xiě)法, less,scss和stylus都是css的預(yù)處理器,這篇文章主要給大家介紹了關(guān)于Vue3中引入SCSS和LESS依賴的基本步驟和注意事項(xiàng),需要的朋友可以參考下2024-05-05通過(guò)vue手動(dòng)封裝on、emit、off的代碼詳解
這篇文章主要介紹了通過(guò)vue手動(dòng)封裝on,emit,off的代碼詳解,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05關(guān)于Element Loading的全局使用(自定義Loading)
這篇文章主要介紹了關(guān)于Element Loading的全局使用(自定義Loading),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08vue-cli-service的參數(shù)配置過(guò)程
這篇文章主要介紹了vue-cli-service的參數(shù)配置過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04vue3中使用reactive定義的變量響應(yīng)式丟失問(wèn)題解決方案
這篇文章主要介紹了vue3中使用reactive定義的變量響應(yīng)式丟失問(wèn)題的具體例子和解決方案,文章通過(guò)代碼示例給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-06-06Vue 實(shí)時(shí)監(jiān)聽(tīng)窗口變化 windowresize的兩種方法
這篇文章主要介紹了Vue 實(shí)時(shí)監(jiān)聽(tīng)窗口變化 windowresize的兩種方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11Vue.js學(xué)習(xí)筆記之常用模板語(yǔ)法詳解
本篇文章主要介紹了Vue.js學(xué)習(xí)筆記之常用模板語(yǔ)法詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07