JavaScript中BOM实现SPA路由的核心是用history API更新URL并渲染视图：通过pushState/replaceState改变地址栏，popstate监听前进后退，拦截a标签点击阻止默认跳转，配合路由表匹配路径并动态渲染，且需服务端统一返回index.html。
JavaScript 中用 BOM 实现单页应用（SPA）路由跳转，核心是利用 window.location 和 history API 模拟页面切换，不触发真实刷新。关键不是“跳转”，而是“更新 URL + 渲染对应视图”。
监听 URL 变化：用 popstate 监听浏览器前进/后退
用户点浏览器的返回/前进按钮时，URL 改变但页面没刷新，需主动捕获这个动作：
- 通过
window.addEventListener('popstate', handler)监听路由状态变化 -
event.state包含你之前 push 或 replace 时传入的状态对象（比如 { page: 'home' }） - 注意：首次加载页面时不会触发 popstate，需手动调用一次路由处理函数
改变 URL 且不刷新：用 history.pushState() 或 replaceState()
代替 location.href = '/about'（这会刷新），改用：
-
history.pushState({ page: 'about' }, '', '/about')—— 添加新历史记录，支持后退 -
history.replaceState({ page: 'contact' }, '', '/contact')—— 替换当前记录，不增加历史长度 - 第二个参数是 title（多数浏览器忽略），第三个是目标 URL（可为相对路径）
- URL 改变后，必须同步更新页面内容，否则只是“假跳转”
绑定导航链接：拦截 a 标签点击，阻止默认行为
给所有路由链接加事件代理，避免页面跳转：
在SEO发布前，从路由清单生成XML网站地图和robots.txt
下载
当代理已经知道网站路由或内容URL，并且在启动前需要有效的sitemap XML、sitemap索引或robots.txt引用时，请使用sitemap。这是一个发布构件技能，而不是爬虫或SEO平台。
立即学习“Java免费学习笔记（深入）”；
- 用
document.addEventListener('click', e => { ... })捕获点击 - 判断
e.target.matches('a[data-router]')或检查 href 是否以 '/' 开头 - 调用
e.preventDefault()，再执行pushState()+ 视图渲染 - 示例：
<a href="/user" data-router>用户页</a>
简易路由匹配与渲染（无框架版）
根据当前 location.pathname 或 event.state.page 渲染对应组件：
- 维护一个路由表：
const routes = { '/': Home, '/about': About, '/user': User } - 写一个
render(path)函数，清空容器、创建新元素、插入 DOM - 首次加载时调用
render(location.pathname)；popstate 回调里也调用它 - 可配合
fetch()动态加载 HTML 或 JSON 数据，实现按需渲染
不复杂但容易忽略：确保服务器对所有路由都返回同一个 HTML 入口文件（如 index.html），否则直接访问 /user 会 404。
