JavaScript单页应用路由核心是URL变化时动态渲染视图，需兼顾开发效率、SEO、历史管理与服务端协作；原生history API是基础但需手动处理事件、服务端fallback及高级功能缺失；React Router v6、Vue Router 4分别提供声明式路由与组合式API支持；轻量库如page.js适用于极简场景；服务端配置与SEO处理不可忽视。
JavaScript 单页面应用（SPA）本质是不刷新页面、靠 JS 动态替换内容，而路由方案决定「URL 变化时该加载哪块视图」。核心不是「能不能实现」，而是「用哪种方案能兼顾开发效率、SEO、历史管理与服务端协作」。
原生 history.pushState + popstate 是底层基础
所有前端路由库最终都封装了它。直接使用意味着完全掌控，但也得自己处理：
- 手动监听
popstate事件，解析location.pathname并渲染对应组件 - 每次调用
pushState或replaceState都要确保不触发页面跳转（即不带href的 a 标签需preventDefault） - 服务端必须配置 fallback：所有非 API 路径都返回
index.html，否则刷新 404 - 不支持嵌套路由、参数解析、守卫等高级功能，适合极简场景或学习原理
window.addEventListener('popstate', (e) => {
const path = location.pathname;
if (path === '/about') renderAbout();
else if (path === '/user/123') renderUser(123);
});
React Router v6 是 React 生态事实标准
它把路由声明式地写在 JSX 里，靠 BrowserRouter 封装 history API，并内置了嵌套、懒加载、导航守卫（useNavigate + useLocation）、数据加载（loader）等能力。
-
Route必须写在Routes内，且路径匹配是「排他性」的（第一个匹配就停止） - 动态参数用
:id写法，通过useParams()获取 -
Outlet用于嵌套路由的子内容占位，替代 v5 的{children} - 服务端渲染需搭配
createStaticRouter，否则 SSR 不生效
function App() {
return (
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="users" element={<Users />} />
<Route path="user/:id" element={<User />} />
</Route>
</Routes>
);
}
Vue Router 4 支持组合式 API 和 HTML5 History 模式
Vue 3 项目默认推荐它，路由配置即 JavaScript 对象，支持命名路由、别名、滚动行为控制、路由元信息（meta）用于权限判断。
立即学习“Java免费学习笔记（深入）”；
- 启用 history 模式需服务端配合，否则刷新 404；hash 模式（
createWebHashHistory）则无需服务端改动 - 动态路由参数用
:id，在setup中用useRoute().params.id读取 - 导航守卫分全局（
router.beforeEach）、路由独享（beforeEnter）、组件内（beforeRouteEnter等）三类 -
scrollBehavior可返回对象控制滚动位置，例如{ top: 0 }或异步获取保存的位置
const routes = [
{ path: '/', component: Home },
{ path: '/post/:id', component: Post, meta: { requiresAuth: true } }
];
const router = createRouter({ history: createWebHistory(), routes });
纯静态站点可考虑 page.js 这类轻量库
不到 3KB，无框架依赖，只做路径匹配和回调执行，适合微前端子应用、文档站或需要最小体积的嵌入场景。
- 不操作 DOM，也不提供组件系统，你得自己写
page('/user', () => {...})里的渲染逻辑 - 支持通配符（
*）、正则匹配、中间件（page('*', middleware)） - 不兼容 IE9 以下，且不处理
base标签或子路径部署的自动修正，需手动传入page.base('/my-app') - 没有活跃维护，新项目慎用；但作为教学示例或临时脚本很干净
page('/', () => document.getElementById('view').innerHTML = '<h1>Home</h1>');
page('/user/:id', ({ params }) => {
document.getElementById('view').innerHTML = `<h1>User ${params.id}</h1>`;
});
page(); // 启动监听
真正容易被忽略的是服务端配置和 SEO 处理：哪怕用了最成熟的 React Router，Nginx 没配 try_files $uri $uri/ /index.html;，用户刷新就 404；又或者没加 meta 标签或服务端预渲染，搜索引擎根本抓不到内容。路由只是链条上的一环，不能只盯着 JS 层。
