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