vue路由history模式頁面刷新404解決方法Koa Express

Posted on by

為什頁面刷新會出現404

因為vue項目中路由hash模式改為瞭history模式，由於hash模式時url帶的#號後面是哈希值不會作為url的一部分發送給服務器，而history模式下當刷新頁面之後瀏覽器會直接去請求服務器，而服務器沒有這個路由，於是就出現404。

那為什麼頁面跳轉就是正常的？跳轉時其實不是通過請求服務器的，而是通過js操作history的API改變地址完成的。

建議：非C端系統可以考慮直接使用hash模式路由，就不會存在此問題瞭

Node服務使用Koa框架

使用koa-connect-history-api-fallback插件來解決

  • 安裝依賴
npm install koa-connect-history-api-fallback --save
  • 使用方法（此演示是使用TypeScript的情況下，用JavaScript開發的忽略直接看下面修改後的代碼）

在node項目中的 app.ts 文件中引入koa-connect-history-api-fallback

// 註意：該引用須在 `import koaStatic from 'koa-static';` 的前面
import history from 'koa-connect-history-api-fallback';
app.use(history());

此時會發現ts報錯提示： 找不到模塊“koa-connect-history-api-fallback”或其相應的類型聲明。ts(2307)

可以通過install該插件對應的類型聲明文件依賴@types/koa-connect-history-api-fallback來解決，但我嘗試安裝後發現npm服務器不存在該類型聲明文件，因此咱們用commonJs規范的方式引入該插件即可（因為這種方式默認導入的是 any 類型）

修改後的代碼如下:

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

Node服務使用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的詳細內容，更多關於vue history模式頁面刷新404的資料請關註WalkonNet其它相關文章！

推薦閱讀：