使用window.pushState修改URL配合AJAX加载页面后浏览器回退异常求助

1. 回退仅显示局部内容的原因 #

你通过pushState修改的地址对应的路由，后端直接返回的是AJAX请求的局部HTML片段。当你从条目详情页整页回退时，浏览器会直接请求该地址，拿到的就是无父页面、无样式的局部内容，自然不会显示原有父页面结构。

2. 需点击两次回退才触发刷新的原因 #

你把onpopstate事件绑定写在了AJAX加载的局部页面中：

• 第一次点击回退时，浏览器加载的是纯局部内容，onpopstate绑定是在页面加载完成后才执行的，第一次回退的动作不会被捕获
• 第二次点击回退时，页面已经完成onpopstate绑定，才会触发刷新逻辑

方案1：调整路由逻辑（推荐） #

修改后端对应路由的逻辑，判断如果是AJAX请求就返回局部片段，如果是正常整页访问就返回包含父页面结构的完整页面，这是最符合前端路由规范的方案，后续不管是用户刷新、回退都能正常显示，不需要额外加刷新逻辑。
示例后端代码（适配你使用的Laravel框架）：

public function showWatches(Request $request)
{
    $data = /* 你的业务查询逻辑 */;
    if ($request->ajax()) {
        return view('partial.watches', compact('data'));
    }
    return view('full.watches-page', compact('data'));
}

方案2：调整前端逻辑（无需改后端） #

如果暂时没法修改后端代码，按下面调整前端代码即可：

1. 把onpopstate事件绑定写到父页面的全局JS中，不要放到局部页面里，保证页面加载时就完成事件绑定
2. 给pushState的状态参数加标识，精准判断回退场景：

// 父页面全局JS代码
$('#brands a').click (function(e) {
    e.preventDefault();
    href = $(this).attr('href');
    // 给历史记录加自定义标识，区分是AJAX生成的记录
    history.pushState({isAjaxPage: true}, '',  href);
    $.ajax({
        type: 'get',
        url: '{{route("show.watches")}}',
        success: function(data) {
            $('#product-items').html(data);
        }
    })    
})

// 全局绑定popstate事件
window.onpopstate = function(event) {
    // 回退到标记的AJAX路由时直接刷新加载完整页面
    if (event.state?.isAjaxPage) {
        location.reload();
    }
};

内容的提问来源于stack exchange，提问作者Edward B.