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

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

标签： vue react javascript java html js html5 浏览器 app 懒加载 switch 路