Vue.js+Spring Boot SPA路由切换时页面刷新闪烁问题如何解决

1. 修正路由跳转方式 #

所有前端路由跳转禁止使用原生<a>标签的href属性，该方式会触发浏览器默认的页面请求行为，导致后端转发index.html整页重载，这是不同浏览器表现不一致的核心原因。请统一使用Vue Router官方跳转方案：

• 模板内跳转使用 <router-link to="/role/all">角色列表</router-link> 组件，自动阻止默认跳转行为
• 逻辑层编程式跳转使用 this.$router.push('/role/all') 方法

2. 优化Spring Boot路由转发规则 #

你当前使用的路径匹配规则/**/{path:[^\.]*}仅适配单级路由路径，多级路径如/role/all会出现匹配偏差，修改为全路径适配规则，同时增加请求头过滤避免接口请求被误转发：

@Controller
class FrontController {
    @GetMapping(value = ["/**"], headers = ["Accept=text/html"])
    fun forwardIndex(): String {
        return "forward:/index.html"
    }
}

3. 补全Vue Router配置 #

如果应用部署在域名子路径下，需配置base参数和后端上下文路径保持一致：

const router = new VueRouter({
  mode: 'history',
  base: '/你的应用上下文路径/', // 根路径部署可填 '/'
  routes
})

4. 配置静态资源缓存策略 #

通过缓存规则减少整页重载时的资源加载耗时，弱化闪烁感知：
Spring Boot 配置文件添加静态资源缓存规则：

# 静态资源缓存1年
spring.web.resources.cache.cachecontrol.max-age=365d
# index.html不缓存
spring.web.resources.cache.cachecontrol.no-cache=true

内容的提问来源于stack exchange，提问作者ljackowski