在 Spring MVC 中部署路由为history模式的vue项目

为了处理 Vue.js 的 History 模式,需要在 Spring MVC 中配置一个控制器来转发所有的非 API 请求到 index.html。这样,前端路由可以接管 URL 并正确显示 Vue.js 组件。

创建一个控制器(例如 ForwardingController)来处理所有的前端路由:

java 复制代码
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class ForwardingController {

    @GetMapping("/**/{path:[^\\.]*}")
    public String forward() {
        // 将所有匹配的请求转发到 /index.html
        return "forward:/index.html";
    }
}

在这个控制器中,/**/{path:[^\.]*} 是一个路径匹配模式,它匹配所有的路径(不包含点 ., 因为点通常用于文件扩展名)。这确保了 Vue.js 的 History 模式可以正确处理路由。

相关推荐
独泪了无痕7 小时前
Vue调试神器:Vue DevTools使用指南
vue.js·前端工程化
优秀稳妥的JiaJi11 小时前
基于腾讯地图实现电子围栏绘制与校验
前端·vue.js·前端框架
好雨知时节t12 小时前
Pinia中defineStore的使用方法
vue.js
_Eleven12 小时前
Pinia vs Vuex 深度解析与完整实战指南
前端·javascript·vue.js
技术狂小子12 小时前
# 一个 Binder 通信中的多线程同步问题
javascript·vue.js
阿懂在掘金14 小时前
Vue 表单避坑(二):多个 v-model 同时更新,为什么数据丢了?
前端·vue.js
an3174215 小时前
解决 VSCode 中 ESLint 格式化不生效问题:新手也能看懂的配置指南
前端·javascript·vue.js
青青家的小灰灰18 小时前
Vue 3 新标准:<script setup> 核心特性、宏命令与避坑指南
前端·vue.js·面试
SuperEugene18 小时前
路由与布局骨架篇:布局系统 | 头部、侧边栏、内容区、面包屑的拆分与复用
前端·javascript·vue.js
最强僚机斯内克18 小时前
Vue 3 + Vite 自动引入插件完整指南(unplugin-vue-components,unplugin-auto-import)
vue.js