解決vue router使用 history 模式刷新后404問題
因為我們的應(yīng)用是單頁客戶端應(yīng)用，當(dāng)使用 history 模式時，URL 就像正常的 url，可以直接訪問http://www.xxx.com/user/id，但是因為vue-router設(shè)置的路徑不是真實存在的路徑，所以刷新就會返回404錯誤。
想要history模式正常訪問，還需要后臺配置支持。要在服務(wù)端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。
也就是在服務(wù)端修改404錯誤頁面的配置路徑，讓其指向到index.html。
警告：
因為這么做以后，你的服務(wù)器就不再返回 404 錯誤頁面，因為對于所有路徑都會返回 index.html 文件。為了避免這種情況，你應(yīng)該在 Vue 應(yīng)用里面覆蓋所有的路由情況，然后在給出一個 404 頁面。
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }
]
})
如此便解決了頁面刷新后404問題。
問題延伸：
但是后面又發(fā)現(xiàn)，在IE瀏覽器下刷新仍然還是404，在網(wǎng)上找了一下原因，是因為IE自作聰明，對錯誤頁面的處理在ie來看頁面大小<1024b 會被認(rèn)為十分不友好，所以ie就將改頁面給替換成自己的錯誤提示頁面了，而我的index.html剛好只有一個DIV：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue-mdm</title> </head> <body> <div id="app"></div> </div> </body> </html>
解決辦法就是充實一下頁面,讓大小超過1024即可。
總結(jié)
以上所述是小編給大家介紹的解決vue router使用 history 模式刷新后404問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue中textarea自適應(yīng)高度方案的實現(xiàn)
本文主要介紹了Vue中textarea自適應(yīng)高度方案的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
Vue+jquery實現(xiàn)表格指定列的文字收縮的示例代碼
這篇文章主要介紹了Vue+jquery實現(xiàn)表格指定列的文字收縮的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
我們項目開發(fā)中經(jīng)常遇到樣式里面會使用less和scss寫法, less,scss和stylus都是css的預(yù)處理器,這篇文章主要給大家介紹了關(guān)于Vue3中引入SCSS和LESS依賴的基本步驟和注意事項,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了通過vue手動封裝on，emit，off的代碼詳解，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
關(guān)于Element Loading的全局使用(自定義Loading)
這篇文章主要介紹了關(guān)于Element Loading的全局使用(自定義Loading),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要給大家介紹了關(guān)于element的表單組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了vue-cli-service的參數(shù)配置過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue3中使用reactive定義的變量響應(yīng)式丟失問題解決方案
這篇文章主要介紹了vue3中使用reactive定義的變量響應(yīng)式丟失問題的具體例子和解決方案,文章通過代碼示例給大家講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-06-06
Vue 實時監(jiān)聽窗口變化 windowresize的兩種方法
這篇文章主要介紹了Vue 實時監(jiān)聽窗口變化 windowresize的兩種方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
本篇文章主要介紹了Vue.js學(xué)習(xí)筆記之常用模板語法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07