Vue3+springboot 部署在一起时,前端动态路由跳转实现

背景:

因为硬件资源问题,且软件并发量不高,故开发阶段是前后端分离,但部署时,是将 前端编译后的包直接放在  springboot 的 static 目录下,maven 打包打成jar 后,将其作为静态资源文件可以被直接访问。

问题:

springboot 内部是tomcat 服务器,将前端包放在 springboot 的static 下后,除了根路径能被访问,其他 vue3 的动态路由都无法跳转(经过测试,这些动态路径是能被拦截器拦截的)。

解决方案:

将无效的路由(vue3的动态路径)都映射到 vue3 编译好的单文件上(即 index.html)

package com.example.demo.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.autoconfigure.web.ServerProperties;
import org.springframework.boot.autoconfigure.web.servlet.error.BasicErrorController;
import org.springframework.boot.autoconfigure.web.servlet.error.ErrorViewResolver;
import org.springframework.boot.web.servlet.error.ErrorAttributes;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Collections;
import java.util.List;
import java.util.Map;

/**
 * @author Rain
 * 处理无效路由
 */
@Controller
public class MyBasicErrorController extends BasicErrorController {

    @Autowired
    public MyBasicErrorController(ErrorAttributes errorAttributes,
                                  ServerProperties serverProperties,
                                  List<ErrorViewResolver> errorViewResolvers) {
        super(errorAttributes, serverProperties.getError(), errorViewResolvers);
    }

    @Override
    public ModelAndView errorHtml(HttpServletRequest request, HttpServletResponse response) {
        HttpStatus status = getStatus(request);
        // 获取 Spring Boot 默认提供的错误信息,然后添加一个自定义的错误信息
        Map<String, Object> model = Collections
                .unmodifiableMap(getErrorAttributes(request, getErrorAttributeOptions(request, MediaType.TEXT_HTML)));
        ModelAndView modelAndView = new ModelAndView("index.html", model, status);
        return modelAndView;
    }

    @Override
    public ResponseEntity<Map<String, Object>> error(HttpServletRequest request) {
        HttpStatus status = getStatus(request);
        // 获取 Spring Boot 默认提供的错误信息,然后添加一个自定义的错误信息
        Map<String, Object> body = getErrorAttributes(request, getErrorAttributeOptions(request, MediaType.ALL));
        return new ResponseEntity<>(body, status);
    }

}

相关推荐

  1. vue2 / vue3 (返回&)判断 + 取消

    2024-04-08 17:16:03       19 阅读
  2. vue3

    2024-04-08 17:16:03       15 阅读
  3. vue3,页面如何滚动到顶部

    2024-04-08 17:16:03       21 阅读
  4. vue3,页面如何滚动到顶部

    2024-04-08 17:16:03       18 阅读
  5. 前端qiankun如何实现微应用

    2024-04-08 17:16:03       11 阅读
  6. vue3及传参

    2024-04-08 17:16:03       35 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-08 17:16:03       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-08 17:16:03       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-08 17:16:03       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-08 17:16:03       18 阅读

热门阅读

  1. 人工智能数据分析Python常用库 03 pandas库

    2024-04-08 17:16:03       10 阅读
  2. FFmpeg - 如何在Linux上安装支持CUDA的FFmpeg

    2024-04-08 17:16:03       13 阅读
  3. 达梦导出工具dexp

    2024-04-08 17:16:03       15 阅读
  4. Linux 创建命令

    2024-04-08 17:16:03       12 阅读
  5. CAP原则详解

    2024-04-08 17:16:03       12 阅读
  6. Policy Gradient-优化动作选择函数

    2024-04-08 17:16:03       11 阅读
  7. Spring Cloud五大组件以及工作原理

    2024-04-08 17:16:03       14 阅读
  8. 前端js获取当hppt协议

    2024-04-08 17:16:03       14 阅读
  9. 想做产品经理,应该选择什么专业?

    2024-04-08 17:16:03       16 阅读
  10. 1368:对称二叉树(tree_c)

    2024-04-08 17:16:03       16 阅读
  11. c++组合requires语句

    2024-04-08 17:16:03       18 阅读
  12. 蓝桥杯第十五届抱佛脚(十)贪心算法

    2024-04-08 17:16:03       17 阅读
  13. Git Flow困境逃脱指南

    2024-04-08 17:16:03       15 阅读
  14. Go-学会使用切片

    2024-04-08 17:16:03       15 阅读
  15. RPM换算成m/s或m/min

    2024-04-08 17:16:03       16 阅读