可用原生JavaScript实现轻量级前端路由：监听popstate响应前进/后退，拦截data-nav链接用pushState更新URL并手动渲染，首次加载时主动执行路由匹配。
可以用原生 JavaScript 监听 URL 变化，配合 history.pushState 和 popstate 事件，手动管理路由跳转与视图渲染，无需框架也能实现轻量级前端路由。
监听浏览器前进/后退（popstate）
用户点击浏览器的前进或后退按钮时，会触发 popstate 事件。你需要在页面加载后立即监听它，并根据当前 location.pathname 渲染对应内容：
- 用
window.addEventListener('popstate', handler)绑定事件 - 事件回调中读取
event.state或直接解析location.pathname - 推荐统一用
location.pathname判断，避免依赖state的完整性
拦截链接点击并替换 URL（pushState）
为所有带 data-nav 属性（或 class="nav-link"）的 <a> 标签绑定点击事件，阻止默认跳转，改用 history.pushState 更新地址栏：
- 调用
history.pushState({ path }, '', href)—— 第二个参数是 title（通常为空），第三个是新路径 - 随后立即手动调用你的路由匹配函数，更新页面内容
- 注意：仅对同源的内部链接处理，外链和带
target="_blank"的链接应放行
定义路由表并匹配渲染
维护一个简单映射对象，把路径字符串对应到渲染函数：
立即学习“Java免费学习笔记（深入）”；
- 例如：
const routes = { '/': renderHome, '/about': renderAbout, '/post/:id': renderPost } - 基础匹配可用
Object.keys(routes).find(key => location.pathname === key) - 如需支持动态参数（如
/post/123），可用正则提取：path.match(/^\/post\/(\d+)$/) - 匹配后执行对应函数，比如
document.getElementById('app').innerHTML = template
首次加载时也执行一次路由
页面初次打开不会触发 popstate，所以需要主动调用一次路由匹配逻辑：
- 在脚本底部或
DOMContentLoaded后，直接运行你的router()函数 - 确保此时 DOM 已就绪，能安全操作容器元素
- 这样无论从链接进入还是直接访问某个路径，都能正确显示内容
不复杂但容易忽略细节，核心就是三件事：接管链接跳转、响应浏览器导航、按路径更新视图。
