核心是修改url和历史栈而不刷新页面，需手动更新视图、监听popstate事件并配置服务端fallback：pushstate(state,'',url)三参数中state可序列化、title被忽略、url须同源；首次加载不触发popstate，须手动初始化。
通过 history.pushState 实现无刷新跳转，核心是修改浏览器地址栏 URL 并更新历史记录，但不触发页面重新加载。它本身不负责内容渲染，需配合 DOM 操作或路由逻辑手动更新页面视图。
pushState 的基本用法和参数含义
history.pushState(state, title, url) 接收三个参数：
-
state：一个可序列化的对象，会随该历史记录保存，后续通过
popstate事件读取（如{page: 'detail', id: 123}） -
title：目前大多数浏览器忽略该参数，可传空字符串
'' - url：新的相对路径或绝对路径（必须同源），仅改变地址栏，不发起请求
实现无刷新跳转的完整步骤
单纯调用 pushState 只改 URL，要达到“跳转效果”，必须同步更新页面内容：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 调用
history.pushState(state, '', '/new-page')更新地址栏和历史栈 - 立即执行 DOM 更新（如通过 AJAX 加载新内容、切换组件、修改 innerHTML）
- 监听
popstate事件，处理浏览器前进/后退时的状态还原 - 确保服务端对所有 SPA 路由返回同一 HTML 入口（避免 404）
常见注意事项和避坑点
实际使用中容易忽略几个关键约束：
- 同源限制：目标 URL 必须与当前页面协议、域名、端口一致，否则抛出安全错误
-
URL 必须有效路径：不能是纯 hash（如
#about），也不能跨域（如https://other.com/a） -
title 参数不可靠：不要依赖它做页面标题管理，应手动调用
document.title = ... - popstate 不触发初始页面加载：首次进入页面不会触发，需在初始化时根据当前 URL 渲染对应视图
简单示例：模拟页面切换
点击按钮跳转到 /user，不刷新：
function goToUser(id) {
const state = { page: 'user', userId: id };
history.pushState(state, '', `/user/${id}`);
loadUserContent(id); // 手动加载并渲染用户内容
}
window.addEventListener('popstate', (e) => {
if (e.state?.page === 'user') {
loadUserContent(e.state.userId);
}
});
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
