【前端路由】从 "页面乱跳" 到 "丝滑切换"：前端路由的两个老伙计

刚学前端那会，我总搞不懂一个事儿：为啥有些网站点来点去，地址栏变来变去，页面却跟焊死了似的不刷新？后来才知道，这背后藏着俩老伙计 ------ hash 和 history，人称 "前端路由双子星"。今天就来扒扒这俩哥们的骚操作，保证看完你也能写出丝滑如德芙的单页应用。

先聊聊 "带 #的倔强小子"------hash 模式

如果你见过网址里带着#的倔强样子，那就是 hash 在搞事情。这哥们有个怪癖：不管后面跟啥，浏览器都当看不见，坚决不刷新页面。就像你妈喊你吃饭，你假装没听见继续打游戏 ------ 主打一个 "我变了，但我不说"。

看看这朴实无华的实现代码：

html 复制代码

<ul>
  <li><a href="/home">首页</a></li>
  <li><a href="/about">关于</a></li>
</ul>

<script>
const routes = [
  { path: '/home', component: () => '<h1>首页页面</h1>' },
  { path: '/about', component: () => '<h1>关于页面</h1>' }
]

// 关键操作：拦截a标签点击
document.querySelectorAll('a[href]').forEach(el => {
  el.addEventListener('click', e => {
    e.preventDefault() // 阻止默认跳转，就像按住要跑的狗
    // 悄咪咪改URL，浏览器 history 栈里会多一条记录
    history.pushState(null, '', el.getAttribute('href'))
    renderView(location.pathname) // 渲染对应内容
  })
})

// 监听前进后退按钮
window.addEventListener('popstate', () => {
  renderView(location.pathname)
})
</script>

这套路简单到感人：用#分割 URL，监听hashchange事件，URL 变了就换内容。优点是兼容性好到能跑在你爷爷的诺基亚上，缺点是那串#总像网址长了个痘痘，看着膈应。

再说说 "高大上的 history 绅士"

后来前端圈开始追求 "无 #美学"，history 模式就登场了。这哥们是浏览器自带的 "历史记录管理员"，能悄咪咪改 URL 还不刷新页面，深藏功与名。

但绅士也有脾气，得按规矩来：

html 复制代码

<ul>
  <li><a href="/home">首页</a></li>
  <li><a href="/about">关于</a></li>
</ul>

<script>
const routes = [
  { path: '/home', component: () => '<h1>首页页面</h1>' },
  { path: '/about', component: () => '<h1>关于页面</h1>' }
]

// 关键操作：拦截a标签点击
document.querySelectorAll('a[href]').forEach(el => {
  el.addEventListener('click', e => {
    e.preventDefault() // 阻止默认跳转，就像按住要跑的狗
    // 悄咪咪改URL，浏览器 history 栈里会多一条记录
    history.pushState(null, '', el.getAttribute('href'))
    renderView(location.pathname) // 渲染对应内容
  })
})

// 监听前进后退按钮
window.addEventListener('popstate', () => {
  renderView(location.pathname)
})
</script>

history 模式看着是清爽了，但有个坑：直接刷新页面会 404。因为浏览器会真的去请求/home这个地址，而服务器上根本没有这个文件。这时候就得让后端兄弟配合，把所有请求都转发到 index.html------ 前端耍的流氓，后端得擦屁股。

俩兄弟的灵魂拷问

想快速上线，兼容性第一？选 hash，写完直接跑，不用麻烦后端
追求 URL 美观，项目够复杂？选 history，但记得跟后端打好招呼
本质上都是：监听 URL 变化 -> 找到对应组件 -> 替换页面内容的套路

其实不管用啥模式，前端路由的核心就是 "骗浏览器"：让它以为在跳转，实则偷偷换内容。就像小时候偷偷换台，假装一直在看新闻联播，实则在看动画片 ------ 都是成年人的小把戏罢了。