vue路由history模式頁面刷新404解決方法Koa?Express
為什頁面刷新會(huì)出現(xiàn)404
因?yàn)関ue項(xiàng)目中路由hash模式改為了history模式，由于hash模式時(shí)url帶的#號(hào)后面是哈希值不會(huì)作為url的一部分發(fā)送給服務(wù)器，而history模式下當(dāng)刷新頁面之后瀏覽器會(huì)直接去請(qǐng)求服務(wù)器，而服務(wù)器沒有這個(gè)路由，于是就出現(xiàn)404。
那為什么頁面跳轉(zhuǎn)就是正常的？跳轉(zhuǎn)時(shí)其實(shí)不是通過請(qǐng)求服務(wù)器的，而是通過js操作history的API改變地址完成的。
建議：非C端系統(tǒng)可以考慮直接使用hash模式路由，就不會(huì)存在此問題了
Node服務(wù)使用Koa框架
使用koa-connect-history-api-fallback插件來解決
- 安裝依賴
npm install koa-connect-history-api-fallback --save
- 使用方法（此演示是使用TypeScript的情況下，用JavaScript開發(fā)的忽略直接看下面修改后的代碼）
在node項(xiàng)目中的 app.ts 文件中引入koa-connect-history-api-fallback
// 注意：該引用須在 `import koaStatic from 'koa-static';` 的前面 import history from 'koa-connect-history-api-fallback'; app.use(history());
此時(shí)會(huì)發(fā)現(xiàn)ts報(bào)錯(cuò)提示： 找不到模塊“koa-connect-history-api-fallback”或其相應(yīng)的類型聲明。ts(2307)
可以通過install該插件對(duì)應(yīng)的類型聲明文件依賴@types/koa-connect-history-api-fallback來解決，但我嘗試安裝后發(fā)現(xiàn)npm服務(wù)器不存在該類型聲明文件，因此咱們用commonJs規(guī)范的方式引入該插件即可（因?yàn)檫@種方式默認(rèn)導(dǎo)入的是 any 類型）
修改后的代碼如下:
const history = require('koa-connect-history-api-fallback');
app.use(history());
Node服務(wù)使用Express框架
使用connect-history-api-fallback插件來解決
- 安裝依賴
npm install connect-history-api-fallback --save
- 使用方法
const history = require('connect-history-api-fallback');
app.use(history());以上就是vue路由history模式頁面刷新404解決方法Koa Express的詳細(xì)內(nèi)容，更多關(guān)于vue history模式頁面刷新404的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue動(dòng)態(tài)代理無須重啟項(xiàng)目解決方案詳解
這篇文章主要為大家介紹了vue動(dòng)態(tài)代理無須重啟項(xiàng)目解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Vue3.5中響應(yīng)式Props解構(gòu)的編譯原理
在Vue3.5版本中,響應(yīng)式Props的解構(gòu)功能正式轉(zhuǎn)正,該功能允許即使在解構(gòu)后也不丟失響應(yīng)性,文通過編譯階段的處理,如何保持解構(gòu)后的props變量仍保持響應(yīng)性,編譯過程中的defineProps宏函數(shù)處理,通過AST和上下文操作實(shí)現(xiàn)變量替換,從而讓解構(gòu)后的變量在運(yùn)行時(shí)維持響應(yīng)式狀態(tài)2024-09-09
這篇文章主要介紹了vue3中vite使用sass的配置方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
通過簡(jiǎn)單的三步讓大家對(duì)VUEX快速的入門，本文還介紹了VUEX的最基礎(chǔ)的函數(shù)以及相關(guān)知識(shí)點(diǎn)，有興趣的學(xué)習(xí)下。2018-05-05
Vue項(xiàng)目配置跨域訪問和代理proxy設(shè)置方式
這篇文章主要介紹了Vue項(xiàng)目配置跨域訪問和代理proxy設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
iview tabs 頂部導(dǎo)航欄和模塊切換欄的示例代碼
這篇文章主要介紹了iview tabs 頂部導(dǎo)航欄和模塊切換欄的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue使用Element組件時(shí)v-for循環(huán)里的表單項(xiàng)驗(yàn)證方法
這篇文章主要介紹了vue使用Element組件時(shí)v-for循環(huán)里的表單項(xiàng)驗(yàn)證方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
Vue router動(dòng)態(tài)路由實(shí)現(xiàn)過程
Vue動(dòng)態(tài)路由(約定路由),聽起來好像很玄乎的樣子,但是你要是理解了實(shí)現(xiàn)思路,你會(huì)發(fā)現(xiàn)沒有想象中的那么難,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由添加功能的簡(jiǎn)單方法,需要的朋友可以參考下2023-03-03
vue-treeselect無法點(diǎn)擊問題(點(diǎn)擊無法出現(xiàn)拉下菜單)
這篇文章主要介紹了vue-treeselect無法點(diǎn)擊問題(點(diǎn)擊無法出現(xiàn)拉下菜單)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue3父子組件通信之子組件修改父組件傳過來的值,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-05-05