标准答案
- history 模式使用正常路径，例如 /users/1，而不是 /#/users/1。
- 前端跳转时调用 history.pushState 或 replaceState 更新地址栏。
- 浏览器前进后退会触发 popstate，路由器需要重新匹配并渲染。
- 点击内部链接时通常要 preventDefault，避免浏览器做整页刷新。
- 服务器必须把前端路由子路径都返回同一个 index.html，否则刷新深层路径会 404。
题目解析
history 模式的用户体验更接近传统网站，URL 更干净，也更利于服务端日志和部分 SEO 场景。但它要求服务端配合，这是和 hash 模式最大的部署差异。
实现时要处理两类导航：应用内主动跳转用 pushState，用户点击浏览器前进后退会触发 popstate。两者最终都要走同一个路径匹配和渲染逻辑。
刷新 404 是 history 模式最常见问题。因为浏览器会请求 /users/1，服务器如果没有兜底到 SPA 入口，就会按真实文件路径查找并失败。
代码示例
history 路由需要手动 pushState，并监听 popstate。
JavaScript
function navigate(path) {
history.pushState(null, '', path)
renderRoute()
}
function renderRoute() {
const path = location.pathname
const render = routes[path] || renderNotFound
render()
}
window.addEventListener('popstate', renderRoute)
document.addEventListener('click', (event) => {
const link = event.target.closest('a[data-link]')
if (!link) return
event.preventDefault()
navigate(link.getAttribute('href'))
})常见误区
- 只调用 pushState，不触发视图重新渲染。
- 忘记监听 popstate，浏览器前进后退时页面内容不变。
- 部署时没有配置服务器兜底，刷新二级路由直接 404。