前端路由的 hash 模式和 history 模式有什么区别？

location / {
  try_files $uri $uri/ /index.html;
}

// 路由表：路径 → 渲染函数，'*' 兜底
const routes = {
  '/': () => '<h1>首页</h1>',
  '/about': () => '<h1>关于</h1>',
  '*': () => '<h1>404</h1>',
}
const app = document.querySelector('#app')

// 1. hash 路由
function createHashRouter() {
  function render() {
    const path = location.hash.slice(1) || '/' // '#/about' → '/about'
    app.innerHTML = (routes[path] || routes['*'])()
  }
  window.addEventListener('hashchange', render) // 修改 hash、前进后退都会触发
  render() // 首次进入页面时渲染
  return {
    push(path) {
      location.hash = path // 会触发 hashchange，不用手动渲染
    },
  }
}

// 2. history 路由
function createHistoryRouter() {
  function render() {
    app.innerHTML = (routes[location.pathname] || routes['*'])()
  }
  function push(url) {
    history.pushState(null, '', url) // 只改 URL，不会触发 popstate
    render() // 所以要自己更新视图
  }
  window.addEventListener('popstate', render) // 前进、后退时触发

  // 用事件委托拦截站内链接的点击
  document.addEventListener('click', (e) => {
    const a = e.target.closest('a')
    if (!a || a.origin !== location.origin || a.target === '_blank') return
    if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return // 保留新标签页打开等默认行为
    e.preventDefault()
    push(a.href)
  })

  render()
  return { push }
}