在 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 模式可以正确处理路由。

相关推荐
圆滚滚肉肉30 分钟前
后端MVC(控制器与动作方法的关系)
后端·c#·asp.net·mvc
源码站~1 小时前
基于Flask+Vue的豆瓣音乐分析与推荐系统
vue.js·python·flask·毕业设计·毕设·校园·豆瓣音乐
江城开朗的豌豆1 小时前
路由守卫通关秘籍:这些钩子函数让你的页面跳转稳如老狗!
前端·javascript·vue.js
加减法原则1 小时前
Vue 模板引用(ref)全面指南:从基础到高级应用
vue.js
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
快起来别睡了1 小时前
Vue 响应式系统与 `computed` 属性详解:小白也能学会的完整指南
vue.js
chanalbert1 小时前
Spring 6 源码深度掘金:66+核心原理与高频面试攻坚指南
python·spring·面试
江城开朗的豌豆1 小时前
Vuex中mutations和actions的那些事儿:为啥非要分家?
前端·javascript·vue.js
opbr1 小时前
🚫🔨 不用重构!教你用 Vue3 + TSX 🧹优雅收纳后台页面一堆操作按钮
前端·vue.js
草履虫建模2 小时前
Postman - API 调试与开发工具 - 标准使用流程
java·测试工具·spring·json·测试用例·postman·集成学习