vue路由history模式頁面刷新404解決方法Koa?Express
為什頁面刷新會(huì)出現(xiàn)404
因?yàn)関ue項(xiàng)目中路由hash模式改為了history模式，由于hash模式時(shí)url帶的#號后面是哈希值不會(huì)作為url的一部分發(fā)送給服務(wù)器，而history模式下當(dāng)刷新頁面之后瀏覽器會(huì)直接去請求服務(wù)器，而服務(wù)器沒有這個(gè)路由，于是就出現(xiàn)404。
那為什么頁面跳轉(zhuǎn)就是正常的？跳轉(zhuǎn)時(shí)其實(shí)不是通過請求服務(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該插件對應(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的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
詳解如何在Vue項(xiàng)目中實(shí)現(xiàn)累加動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了如何在你的Vue項(xiàng)目中實(shí)現(xiàn)累加動(dòng)畫，文中的示例代碼簡潔易懂，具有一定的參考價(jià)值，感興趣的小伙伴可以了解一下2023-06-06
這篇文章主要介紹了vue的雙向綁定和依賴收集，主要是通過Object.defineProperty() 實(shí)現(xiàn)雙向綁定，具體思路代碼大家跟隨小編一起看看吧2018-11-11
uni-app中App與webview雙向?qū)崟r(shí)通信詳細(xì)代碼示例
在移動(dòng)應(yīng)用開發(fā)中,uni-app是一個(gè)非常流行的框架,它允許開發(fā)者使用一套代碼庫構(gòu)建多端應(yīng)用,包括H5、小程序、App等,這篇文章主要給大家介紹了關(guān)于uni-app中App與webview雙向?qū)崟r(shí)通信的相關(guān)資料,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)色板功能，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，感興趣的小伙伴可以了解一下2023-06-06
vue+vuex+json-seiver實(shí)現(xiàn)數(shù)據(jù)展示+分頁功能
這篇文章主要介紹了vue+vuex+json-seiver實(shí)現(xiàn)數(shù)據(jù)展示+分頁功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
Vue數(shù)組中出現(xiàn)__ob__:Observer無法取值問題的解決方法
__ob__: Observer這個(gè)屬性其實(shí)是Vue監(jiān)控變量產(chǎn)生的,下面這篇文章主要給大家介紹了關(guān)于Vue數(shù)組中出現(xiàn)__ob__:?Observer無法取值問題的解決方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
骨架屏就是在頁面未渲染完成的時(shí)候，先用一些簡單的圖形大致勾勒出頁面的基本輪廓，給用戶帶來更好的體驗(yàn)。這篇文章主要介紹了vue 移動(dòng)端注入骨架屏,需要的朋友可以參考下2019-06-06
vue刷新頁面時(shí)去閃爍提升用戶體驗(yàn)效果的實(shí)現(xiàn)方法
這篇文章主要介紹了vue刷新頁面時(shí)去閃爍提升體驗(yàn)方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12
vue-element-admin按鈕級權(quán)限管控的實(shí)現(xiàn)
開發(fā)離不開權(quán)限,不同的用戶登錄,根據(jù)不同的權(quán)限,可以訪問不同的管理目錄，本文主要介紹了vue-element-admin按鈕級權(quán)限管控的實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的可以了解一下2022-04-04
這篇文章主要介紹了解決vue頁面刷新產(chǎn)生白屏的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07