Scala Play框架项目浏览器前进后退跳转异常，URI变更页面不刷新

问题根因定位 #

你遇到的URI变化但页面无更新、无网络请求的问题，通常是以下三类原因导致：

1. 前端调用了history.pushState/history.replaceState手动修改了浏览器历史记录，但没有监听popstate事件做对应的页面更新逻辑，浏览器前进后退时仅触发popstate事件，默认不会发起页面跳转请求
2. 路由配置不匹配，不同路径命中同一个后端Action，返回内容完全一致，就算发起请求也看不出页面变化
3. 浏览器往返缓存（bfcache）机制导致前进后退时直接复用了内存中的页面快照，没有发起新请求

解决方案 #

1. 修正路由配置 #

你当前定义的路由规则是：

GET         /person/:height            controllers.ViewController.person(height: Int)

该规则仅能匹配/person/数值格式的路径，你复现步骤里的/person/height/78478、/person/height都无法匹配该规则，建议按照你实际的路径需求调整路由：
如果需要匹配/person/height/数值格式的路径，修改路由为：

GET         /person/height/:height            controllers.ViewController.person(height: Int)
# 补充/person/height路径的对应路由
GET         /person/height                    controllers.ViewController.personDefault
# 补充根路径的对应路由
GET         /                                 controllers.ViewController.index

2. 前端添加popstate事件监听 #

如果你的项目中存在前端JS手动修改历史记录的逻辑，需要添加popstate事件监听，触发时主动更新页面内容：
如果是服务端渲染项目，直接触发页面重新加载即可：

window.addEventListener('popstate', () => {
  window.location.reload()
})

如果是前后端分离项目，在回调中根据当前location.pathname匹配对应的页面组件渲染即可。

3. 禁用浏览器bfcache（可选） #

如果不需要用到浏览器的往返缓存，可以在后端响应头中添加Cache-Control: no-store，强制浏览器前进后退时发起新请求：
修改你的Controller代码，给Ok响应添加响应头：

def person(height: Int): EssentialAction = cached.apply(req => req.path, cacheDuration) {
    withoutLoginAction { implicit loginState =>
      implicit request =>
        Ok(views.html.person(Option(height))).withHeaders(
          "Cache-Control" -> "no-store, no-cache, must-revalidate"
        )
    }
  }

4. 校验缓存key有效性 #

你当前使用的Play缓存组件的key是请求路径req.path，确认不同路径对应的缓存不会互相覆盖，可在开发环境临时注释缓存逻辑测试，排除缓存导致不同路径返回相同内容的问题。

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