最近寫了一個PC端項目,在打包上線時遇到一個問題,在nginx打包后在線上預覽網站刷新頁面時會報404錯誤,點擊某些商品也會報404錯誤,經過查找原因發現是因為當時把路由模式設為了
history路由
只需要將路由轉為hash即可
兩種路由的具體說明
1、hash ——即地址欄URL中的#符號(此hsah 不是密碼學里的散列運算)。
比如這個URL:http://www.abc.com/#/hello, hash 的值為#/hello。它的特點在於:hash 雖然出現URL中,但不會被包含在HTTP請求中,對后端完全沒有影響,因此改變hash不會重新加載頁面。
2、history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。(需要特定瀏覽器支持)
這兩個方法應用於瀏覽器的歷史記錄站,在當前已有的back、forward、go 的基礎之上,它們提供了對歷史記錄進行修改的功能。只是當它們執行修改是,雖然改變了當前的URL,但你瀏覽器不會立即向后端發送請求。
history模式,會出現404 的情況,需要后台配置。
二、404 錯誤
1、hash模式下,僅hash符號之前的內容會被包含在請求中,如 http://www.abc.com,因此對於后端來說,即使沒有做到對路由的全覆蓋,也不會返回404錯誤;
2、history模式下,前端的url必須和實際向后端發起請求的url 一致,如http://www.abc.com/book/id 。如果后端缺少對/book/id 的路由處理,將返回404錯誤。
轉載
作者:Wo信你個鬼
鏈接:https://www.jianshu.com/p/94ca51e4ab9b
來源:簡書