如何通过JavaScript实现前端路由？

前端路由的核心是在不刷新整个页面的情况下，根据URL的变化切换对应的页面内容，是单页应用实现多视图切换的基础能力，主要通过监听URL变化并匹配对应的处理逻辑来实现。

前端路由的两种常见实现方式

目前主流的前端路由实现分为基于hash的路由和基于history API的路由两种，二者的核心差异在于URL的表现形式和实现原理不同。

1. 基于hash的路由实现

hash指的是URL中#后面的部分，这部分内容的变化不会触发页面刷新，同时浏览器提供了hashchange事件可以监听hash的变化，适合用来实现前端路由。

实现步骤如下：

• 监听hashchange事件，获取当前hash值
• 维护一个路由映射表，将hash路径和对应的处理函数关联
• 当hash变化时，匹配路由映射表执行对应的处理函数，更新页面内容

下面是完整的hash路由实现示例：

// 路由映射表，存储路径和对应的渲染函数
const routes = {
  '/': () => {
    document.getElementById('app').innerHTML = '<h1>首页</h1><p>这是首页内容</p>';
  },
  '/about': () => {
    document.getElementById('app').innerHTML = '<h1>关于我们</h1><p>这是关于页面内容</p>';
  },
  '/contact': () => {
    document.getElementById('app').innerHTML = '<h1>联系我们</h1><p>这是联系页面内容</p>';
  }
};

// 路由处理函数，根据当前hash匹配路由
function handleRoute() {
  // 获取当前hash，去掉开头的#
  const currentHash = window.location.hash.slice(1) || '/';
  // 匹配路由，没有匹配到则显示404
  if (routes[currentHash]) {
    routes[currentHash]();
  } else {
    document.getElementById('app').innerHTML = '<h1>404</h1><p>页面不存在</p>';
  }
}

// 监听hash变化事件
window.addEventListener('hashchange', handleRoute);
// 页面初始加载时也执行一次路由处理
window.addEventListener('load', handleRoute);

2. 基于history API的路由实现

history API是HTML5新增的接口，允许开发者直接操作浏览器的历史记录栈，通过pushState和replaceState方法可以改变URL而不刷新页面，同时监听popstate事件可以捕获浏览器的前进后退操作。

实现步骤如下：

• 使用pushState或replaceState修改URL，不触发页面刷新
• 监听popstate事件，捕获浏览器前进后退导致的URL变化
• 拦截页面内的路由跳转点击，阻止默认跳转行为，手动修改URL并触发路由处理
• 维护路由映射表，匹配路径执行对应的渲染逻辑

下面是完整的history路由实现示例：

// 路由映射表
const routes = {
  '/': () => {
    document.getElementById('app').innerHTML = '<h1>首页</h1><p>这是首页内容</p>';
  },
  '/about': () => {
    document.getElementById('app').innerHTML = '<h1>关于我们</h1><p>这是关于页面内容</p>';
  },
  '/contact': () => {
    document.getElementById('app').innerHTML = '<h1>联系我们</h1><p>这是联系页面内容</p>';
  }
};

// 路由处理函数
function handleRoute() {
  const currentPath = window.location.pathname || '/';
  if (routes[currentPath]) {
    routes[currentPath]();
  } else {
    document.getElementById('app').innerHTML = '<h1>404</h1><p>页面不存在</p>';
  }
}

// 拦截页面内的路由跳转链接
document.addEventListener('click', (e) => {
  // 判断点击的是路由跳转链接
  if (e.target.tagName === 'A' && e.target.dataset.route) {
    e.preventDefault();
    const path = e.target.getAttribute('href');
    // 修改URL，不刷新页面
    window.history.pushState({}, '', path);
    // 执行路由处理
    handleRoute();
  }
});

// 监听浏览器前进后退事件
window.addEventListener('popstate', handleRoute);
// 页面初始加载执行路由处理
window.addEventListener('load', handleRoute);

两种实现方式的对比

两种路由实现方式各有适用场景，具体差异如下：

实现时的注意事项

在实际实现前端路由时，需要注意以下几点：

• 路由映射表的设计要支持动态参数，比如/user/:id这种路径，需要编写参数解析逻辑
• history路由模式下，服务器必须配置 fallback，避免用户直接刷新页面出现404
• 路由切换时可以添加过渡动画，提升用户体验
• 可以在路由处理函数中添加权限校验逻辑，实现路由守卫功能

JavaScript前端路由hash_routerhistory_router单页应用修改时间：2026-07-17 01:03:29