springboot+vue的前端路由和后端路由沖突問題

問題：

在進行前后端項目的整合時，出現：當vue項目打包編譯后放入后端項目中，后端編譯成jar包運行，

在顯示index.html后，點擊頁面之間可以正常跳轉，但是刷新url路徑會出現404,總結如下：

 vue路由器的兩種工作模式

1. 對於一個url來說，hash值定義—— #及其后面的內容就是hash值。

2. hash值不會包含在 HTTP 請求中，即：hash值不會帶給服務器。

3. hash模式：

   1. 地址中永遠帶着#號，不美觀 。

   2. 若以后將地址通過第三方手機app分享，若app校驗嚴格，則地址會被標記為不合法。

   3. 兼容性較好。

4. history模式：

   1. 地址干凈，美觀 。

   2. 兼容性和hash模式相比略差。

   3. 應用部署上線時需要后端支持，解決刷新頁面服務端404的問題。

vue的路由中：Hash模式不會沖突, 但是History模式會沖突.  瀏覽器先渲染服務端發回的頁面內容, 然后前端路由

再更改頁面內容, 最終按前端路由的規則顯示頁面內容. 流程如下:

 一個新的請求發起后 --> 后端路由  -> 后端路由規則返回內容 --> 瀏覽器加載頁面內容 --> 前端路由處理渲染 -> 按前端路由規則修改頁面內容 --> 結束

刷新帶來的問題

Hash模式：hash值變更不會讓瀏覽器發請求外, 因此在刷新瀏覽器時，不會向服務器發起請求，只有前端的路由匹配處理來引起頁面變化，除了hash的其他部分的變更都會引起瀏覽器發送請求，如端口、域名等

History模式：url一變化，就會向瀏覽器發請求，前提是刷新頁面，但是vue是單頁面應用，只有路由帶來的組件變化，因此頁面不刷新即不發請求，所以注意404的觸發條件；

發起請求后，服務器收到請求，根據自己配置的路由規則處理，若沒有對應的路由，就會返回404給前端瀏覽器；若有對應的規則就會返回，頁面或數據等

注意：瀏覽器的緩存機制（304狀態），

 

解決辦法

前端vue項目定義路由規則，加上統一的base:'路徑'，在進行vue的路由跳轉時就會基於這個base路徑跳轉，如/路徑/hello、/路徑/user等，

此時，后端項目的請求路徑就可以針對這個base路徑來處理，在controller中加入

    @GetMapping("/路徑/**")
    public String vueIndex(){
        return "/index.html";
    }
    @GetMapping("/")
    public String vue(){
        return "/index.html";
    }

根據上述的流程，首先在瀏覽器的地址輸入項目url，后端返回頁面到瀏覽器，瀏覽器收到html后加載 ，然后就會根據vue的路由規則進行渲染處理

因為vue是單頁面應用，所以只要返回index頁面就好，之后vue有自己的路由規則處理，這樣就解決了前后路由沖突，以及history模式下刷新的問題。

至於其他的ajax請求資源數據庫數據等，后端其他資源請求注意不要和  base:'路徑'  ，搞得混淆了

記得點贊推薦偶 ！O(∩_∩)O