前端路由演进：从 Hash 到 Navigation API 原理与实现

1. 引言

在现代前端开发中，无论是使用 React、Vue 还是 Angular，我们每天都在和'路由'打交道。你是不是也遇到过这样的困惑：

为什么我在浏览器里直接回车访问 /user/123 会报 404 错误，但点击链接跳转却没事？
Hash 路由（带 # 号）和 History 路由（不带 #）到底有啥本质区别？
React Router 或 Vue Router 底层到底是用什么 API 实现的？

很多新手甚至工作一两年的工程师，虽然会配置路由，但对浏览器底层的导航机制和History API缺乏系统的理解，导致遇到复杂的路由拦截、异步加载或权限控制问题时束手无策。

文章内容概览

本文将带你彻底搞懂前端路由的演进与原理，分为以下四个部分：

背景知识：多页应用（MPA）与单页应用（SPA）的区别。
Hash 路由：利用 hashchange 事件实现最基础的路由。
History API 路由：利用 pushState 和 popstate 实现干净的 URL（主流方案）。
Navigation API：探索新一代路由 API，看看它解决了什么问题。

2. 正文

环境准备

本教程不需要复杂的构建工具（Webpack/Vite），只需要：

浏览器：Chrome、Edge 或 Firefox（推荐最新版）。
编辑器：VS Code 或任意文本编辑器。
服务环境：为了测试 History API，需要一个简单的 HTTP 服务器（推荐使用 VS Code 的 Live Server 插件，或者 Node.js 的 http-server）。直接双击打开 HTML 文件在某些 History API 场景下会有跨域或路径限制。

理解路由的本质 —— MPA vs SPA

在写代码前，先理清概念。

MPA (Multi-Page Application)：传统的多页应用。每次点击链接，浏览器向服务器发送请求，服务器返回一个新的 HTML 文件。浏览器会'白屏'刷新。
SPA (Single-Page Application)：单页应用。页面只加载一次 HTML。后续的'跳转'，其实只是 URL 变了 + JS 监听到了变化 + JS 替换了页面里的 DOM 内容。

核心公式：

客户端路由 = URL 变化监听 + 视图渲染逻辑

Hash 路由 —— 最古老但兼容性最好的方案

Hash 路由的 URL 长这样：http://example.com/#/user/123。# 后面的内容称为 Hash，它原本的设计初衷是用于页面内的锚点定位（比如跳转到页面的某个章节）。

核心原理

浏览器提供了一个专门的事件 hashchange。当 URL 中的 Hash 部分发生变化时，这个事件就会触发。

代码实现

创建一个 index-hash.html，写入以下代码：

<!DOCTYPE html>
< =>

    
    Hash Router Demo
    


    
        
        首页
        关于
    
    默认内容

<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"/> <title>Navigation API Router Demo</title> <style> body { font-family: sans-serif; padding: 20px; } .nav a { margin-right: 10px; cursor: pointer; color: blue; text-decoration: underline; } #content { margin-top: 20px; padding: 10px; border: 1px solid #ccc; } </style> </head> <body> <div class="nav"> <a href='/home'>首页</a> <a href='/about'>关于</a> </div> <div id="content">默认内容</div> <script> const contentDiv = document.getElementById("content"); const routes = { "/home": "<h1>首页</h1><p>这是干净的 URL 首页！</p>", "/about": "<h1>关于</h1><p>Navigation API 实现的关于页面。</p>", }; const navigation = window.navigation; if (navigation) { navigation.addEventListener("navigate", (event) => { // 如果是跨域导航，或者下载文件等，我们不处理 if (!event.canIntercept || event.hashChange) { return; } const url = new URL(event.destination.url); // 只处理同源路由 if (url.origin === location.origin) { event.intercept({ async handler() { // 1. 这里可以加 loading 动画 console.log("正在跳转到:", url.pathname); // 2. 手动更新 URL (虽然 intercept 会自动处理，但我们需要同步状态) // window.history.forward(); // 通常不需要手动操作，API 会处理 history stack // 3. 渲染页面 const path = url.; contentDiv. = routes[path] || ; }, }); } }); } </script> </body> </html>

前端路由演进：从 Hash 到 Navigation API 原理与实现

1. 引言

文章内容概览

2. 正文

环境准备

理解路由的本质 —— MPA vs SPA

Hash 路由 —— 最古老但兼容性最好的方案

核心原理

代码实现

更多推荐文章

相关免费在线工具

效果测试

优缺点总结

History API 路由 —— 现代 SPA 的主流选择

核心原理

代码实现

关键点解析

Navigation API —— 路由的未来？

核心原理

代码实现（需 Chrome 102+）

Navigation API 的优势

3. 常见问题 (Q&A)

4. 总结

更多推荐文章

相关免费在线工具

前端路由演进：从 Hash 到 Navigation API 原理与实现

1. 引言

文章内容概览

2. 正文

环境准备

理解路由的本质 —— MPA vs SPA

Hash 路由 —— 最古老但兼容性最好的方案

核心原理

代码实现

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

效果测试

优缺点总结

History API 路由 —— 现代 SPA 的主流选择

核心原理

代码实现

关键点解析

Navigation API —— 路由的未来？

核心原理

代码实现（需 Chrome 102+）

Navigation API 的优势

3. 常见问题 (Q&A)

4. 总结

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具