為什頁(yè)面刷新會(huì)出現(xiàn)404

因?yàn)関ue項(xiàng)目中路由hash模式改為了history模式，由于hash模式時(shí)url帶的#號(hào)后面是哈希值不會(huì)作為url的一部分發(fā)送給服務(wù)器，而history模式下當(dāng)刷新頁(yè)面之后瀏覽器會(huì)直接去請(qǐng)求服務(wù)器，而服務(wù)器沒(méi)有這個(gè)路由，于是就出現(xiàn)404。

那為什么頁(yè)面跳轉(zhuǎn)就是正常的？跳轉(zhuǎn)時(shí)其實(shí)不是通過(guò)請(qǐng)求服務(wù)器的，而是通過(guò)js操作history的API改變地址完成的。

建議：非C端系統(tǒng)可以考慮直接使用hash模式路由，就不會(huì)存在此問(wèn)題了

Node服務(wù)使用Koa框架

使用koa-connect-history-api-fallback插件來(lái)解決

• 安裝依賴

npm install koa-connect-history-api-fallback --save

• 使用方法（此演示是使用TypeScript的情況下，用JavaScript開(kāi)發(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)

可以通過(guò)install該插件對(duì)應(yīng)的類型聲明文件依賴@types/koa-connect-history-api-fallback來(lái)解決，但我嘗試安裝后發(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插件來(lái)解決

• 安裝依賴

npm install connect-history-api-fallback --save

• 使用方法

const history = require('connect-history-api-fallback');
app.use(history());

以上就是vue路由history模式頁(yè)面刷新404解決方法Koa Express的詳細(xì)內(nèi)容，更多關(guān)于vue history模式頁(yè)面刷新404的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！