【Angular】——路由之重新整理報404
專案進入測試期,發現了一個開發過程中沒有發現的問題:釋出後訪問網站,使用過程一切正常:
但只要重新整理,就會:
開始查了一些資料:大都是關於這樣的說法:
那如果必須要這樣解決的話,不就違背了前後端分離的原則?又開始讓後端控制前端,這樣前端自己封裝路由又有何深刻的意義。因為有著這樣的信念:肯定有前端的解決方案,所以繼續查資料,最終發現了我想要的,在此分享給大家:
首先,我用的是tomcat釋出、http://localhost:8080/vb/type是第一個頁面,第一次跳轉這個頁面,一切正常,重新整理,則報404。這是因為在介面出現後,瀏覽器則不再訪問前端,除非有按鈕等觸發,所以重新整理後瀏覽器不再走前端的路由,而是訪問後端,而後端並沒有定義該路由,所以找不到路徑。這算是Angular的一個坑吧......
解決方案:
配置app.module.ts
在NgModule中新增:
providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy, }], 如果你的服務也許在此,則:
providers: [DataService, { provide: LocationStrategy, useClass: HashLocationStrategy, }], 另外需要引入:
import {HashLocationStrategy, LocationStrategy} from '@angular/common'; OK,這樣設定後,訪問Angular,會自動在根節點後面新增一個#錨點。在此重新整理就不會報404錯誤了。
相關文章
- angular當router使用userhash:false時路由404問題AngularFalse路由
- laravel8路由問題+apache,/根路由報404Laravel路由Apache
- 配置nginx解決vue路由history模式下重新整理404問題NginxVue路由模式
- Angular路由——子路由Angular路由
- laravel 路由404問題Laravel路由
- Angular路由——路由守衛Angular路由
- Angular路由——路由基礎Angular路由
- Angular路由——輔助路由Angular路由
- nginx重新整理顯示404Nginx
- @angular/router 原始碼分析之註冊路由Angular原始碼路由
- angular路由傳參Angular路由
- Angular4+路由Angular路由
- angular 路由傳參Angular路由
- angular 巢狀路由Angular巢狀路由
- vue-route+webpack部署單頁路由專案,訪問重新整理出現404問題VueWeb路由
- vue重新整理頁面丟失404Vue
- iis部署build檔案重新整理404UI
- 使用Angular CLI生成路由Angular路由
- 新來的前端小姐姐問:Vue路由history模式重新整理頁面出現404問題前端Vue路由模式
- 解決vue專案部署到Nginx重新整理頁面報404的問題VueNginx
- Angular路由——在路由時候傳遞資料Angular路由
- nginx部署vue專案 重新整理出現404NginxVue
- vue3.x路由404通配處理Vue路由
- [NGX]Angular路由守衛初探(1)Angular路由
- angular路由中的惰性載入Angular路由
- jquery post 報404錯誤jQuery
- angular4學習記錄 — 路由Angular路由
- angular路由高亮--長明燈RouterLinkActiveAngular路由
- CSS動畫篇之404動畫CSS動畫
- react-router browserHistory重新整理頁面404問題解決React
- laravel設定路由的使用提示404找不到頁面Laravel路由
- nginx環境下的laravel除了預設路由,其它都是404NginxLaravel路由
- Angular 之我見Angular
- angular4定義路由遇到的那些事Angular路由
- 在angular路由中使用正規表示式Angular路由
- Angular專案路由配置與導航守衛Angular路由
- struts2_專案執行報404
- springMVC下前端ajax報404錯誤SpringMVC前端