javascript如何实现单页面应用_它有哪些路由方案？_技术教程

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 (
    
      }>
        } />
        } />
        } />
      
    
  );
}

`Vue Router 4` 支持组合式 API 和 HTML5 History 模式

Vue 3 项目默认推荐它，路由配置即 JavaScript 对象，支持命名路由、别名、滚动行为控制、路由元信息（meta）用于权限判断。

启用 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 = 'Home');
page('/user/:id', ({ params }) => {
  document.getElementById('view').innerHTML = `User ${params.id}`;
});
page(); // 启动监听

真正容易被忽略的是服务端配置和 SEO 处理：哪怕用了最成熟的 React Router，Nginx 没配 try_files $uri $uri/ /index.html;，用户刷新就 404；又或者没加 meta 标签或服务端预渲染，搜索引擎根本抓不到内容。路由只是链条上的一环，不能只盯着 JS 层。