javascript中的路由是什么_如何实现单页应用的路由功能-js教程-PHP中文网

javascript中的路由是什么_如何实现单页应用的路由功能

夜晨

发布： 2025-12-18 21:38:02

原创

380人浏览过

JavaScript路由是在SPA中不刷新页面、根据URL变化动态加载内容的机制，核心为监听URL、匹配路径规则、触发渲染；支持Hash和History两种模式，工程中推荐使用React Router等成熟库。

javascript中的路由是什么_如何实现单页应用的路由功能

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 监听浏览器前进/后退：

百度文心百中

百度大模型语义搜索体验中心

263

查看详情

// 点击链接时手动推入历史
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 这类经过验证的方案。

以上就是javascript中的路由是什么_如何实现单页应用的路由功能的详细内容，更多请关注php中文网其它相关文章！