标准答案
- hash 模式把前端路径放在 URL 的 # 后面，例如 /#/users/1。
- 改变 hash 不会触发浏览器向服务器请求新文档。
- 前端通过 hashchange 事件或页面初始化时读取 location.hash。
- 路由器根据 hash 对应的路径查表，渲染匹配组件。
- hash 模式部署简单，但 URL 不够干净，SEO 和服务端感知能力有限。
题目解析
hash 路由依赖浏览器对片段标识符的处理。# 后面的内容原本用于页面内锚点，改变它不会让服务器重新返回 HTML，所以单页应用可以用它承载前端路径。
实现上最小路由器只需要一张 path 到 render 函数的表，再在 hashchange 时重新匹配。首次进入页面也要执行一次渲染，否则刷新后不会显示对应视图。
它的优势是部署简单，任何路径都还是请求同一个 HTML；代价是 URL 带 #，服务端和搜索引擎通常不直接理解 # 后面的应用状态。
代码示例
hash 路由的核心是监听 hashchange 并按路径渲染。
JavaScript
const routes = {
'/': () => renderHome(),
'/users': () => renderUsers()
}
function getHashPath() {
return location.hash.slice(1) || '/'
}
function renderRoute() {
const path = getHashPath()
const render = routes[path] || renderNotFound
render()
}
window.addEventListener('hashchange', renderRoute)
renderRoute()常见误区
- 认为 hash 变化会请求服务器，混淆了 hash 路由和 history 路由。
- 只监听 hashchange，忘记页面首次加载也要根据当前 hash 渲染。
- 不处理未知路径和默认重定向，导致空白页。