vue路由history模式頁面刷新404解決方法Koa Express
為什頁面刷新會出現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其它相關文章!
推薦閱讀:
- vue-router history模式服務器端配置過程記錄
- Vue中Router路由兩種模式hash與history詳解
- vue-router如何實現history模式配置
- vue-router中hash模式與history模式的區別
- Vue實現hash模式網址方式(就是那種帶#的網址、井號url)