javascript路由是在spa中不刷新页面、根据url变化动态加载内容的机制，核心为监听url、匹配路径规则、触发渲染；支持hash和history两种模式，工程中推荐使用react router等成熟库。
JavaScript 中的路由，指的是在单页应用（SPA）中，不刷新页面的前提下，根据 URL 的变化动态加载不同内容或组件的机制。它模拟了传统多页网站的“跳转”体验，但所有操作都在一个 HTML 页面内完成，由 JavaScript 控制视图切换。
路由的核心作用
单页应用只有一个 index.html，所有逻辑和界面都靠 JS 渲染。路由负责：
- 监听浏览器地址栏变化（如点击链接、前进/后退）
- 解析当前 URL 路径（例如
/user/123） - 匹配预定义的路径规则（如
/user/:id） - 触发对应组件渲染或数据获取逻辑
原生实现简易路由（Hash 模式）
利用 URL 中 # 后面的部分（hash），它的变化不会导致页面刷新，且可通过 hashchange 事件监听：
window.addEventListener('hashchange', () => {
const path = location.hash.slice(1) || '/';
renderView(path);
});
function renderView(path) {
const view = document.getElementById('view');
switch (path) {
case '/': view.innerHTML = '<h2>首页</h2>'; break;
case '/about': view.innerHTML = '<h2>关于</h2>'; break;
default: view.innerHTML = '<h2>404</h2>';
}
}
配合 <a href="#/about">关于</a> 就能实现基础跳转。
立即学习“Java免费学习笔记（深入）”；
History API 实现更自然的路由（HTML5 模式）
用 history.pushState() 和 history.replaceState() 修改 URL（无 hash），配合 popstate 监听浏览器前进/后退：
// 点击链接时手动推入历史
document.querySelectorAll('nav a').forEach(a => {
a.addEventListener('click', e => {
e.preventDefault();
const url = e.target.getAttribute('href');
history.pushState({ path: url }, '', url);
renderView(url);
});
});
// 监听后退/前进
window.addEventListener('popstate', e => {
renderView(e.state?.path || '/');
});
注意：服务端需配置所有路由返回同一份 index.html，否则直接访问 /user/123 会 404。
主流框架中的路由（以 React Router 为例）
实际项目中，推荐使用成熟路由库，避免重复造轮子。React Router v6 写法简洁：
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/user/:id" element={<User />} />
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
);
}
useParams()、useNavigate() 等 Hook 让参数获取和跳转更直观，还内置了嵌套路由、守卫、懒加载等能力。
基本上就这些。路由本质是 URL 和 UI 状态的映射关系，核心在于监听 + 匹配 + 渲染。选 Hash 还是 History 取决于兼容性要求；自己写适合学习原理，工程中优先用 React Router、Vue Router 或 Angular Router 这类经过验证的方案。
