如何在 JavaScript 中使用 History 路由来避免代码重复？

在前端单页应用开发中，使用History路由可以实现无刷新页面跳转，但如果每次处理路由变化都重复编写监听、解析、跳转逻辑，会导致代码冗余且难以维护。通过合理的封装设计，我们可以把通用逻辑抽离出来，避免重复编码。

History路由的核心原理

History路由基于浏览器提供的history对象实现，核心是通过pushState和replaceState方法修改浏览器历史记录，同时监听popstate事件来响应路由变化。其中pushState会向历史栈添加新记录，replaceState会替换当前历史记录，这两个方法都不会触发页面刷新，只会修改地址栏的URL。

重复代码出现的常见场景

未封装的History路由使用通常会有以下问题：

• 每次路由跳转都要重复调用pushState并处理参数拼接
• 路由监听逻辑在每个页面都要单独编写
• 路由参数解析、权限校验等逻辑反复实现
• 路由跳转前的拦截逻辑分散在各个业务代码中

封装通用History路由类避免重复

我们可以把路由的通用能力封装成一个独立的类，所有业务场景都复用这个类的实例，避免重复编写基础逻辑。下面是一个基础的实现示例：

class HistoryRouter {
  constructor() {
    // 存储路由配置，key为路径，value为对应的处理函数
    this.routes = {};
    // 当前路由路径
    this.currentPath = window.location.pathname;
    // 初始化监听popstate事件
    this._initListener();
  }

  // 私有方法：初始化路由监听
  _initListener() {
    window.addEventListener('popstate', () => {
      this.currentPath = window.location.pathname;
      this._matchRoute();
    });
  }

  // 注册路由
  register(path, callback) {
    this.routes[path] = callback;
  }

  // 匹配并执行对应路由的回调
  _matchRoute() {
    const callback = this.routes[this.currentPath];
    if (callback) {
      callback();
    } else {
      console.log('未匹配到对应路由');
    }
  }

  // 路由跳转，封装pushState逻辑
  push(path) {
    window.history.pushState({}, '', path);
    this.currentPath = path;
    this._matchRoute();
  }

  // 替换当前路由，封装replaceState逻辑
  replace(path) {
    window.history.replaceState({}, '', path);
    this.currentPath = path;
    this._matchRoute();
  }

  // 解析当前路由的查询参数
  getQueryParams() {
    const params = new URLSearchParams(window.location.search);
    const result = {};
    for (const [key, value] of params.entries()) {
      result[key] = value;
    }
    return result;
  }
}

实际使用方式

封装完成后，我们只需要在项目中创建一次路由实例，后续所有路由相关操作都调用实例的方法即可，不需要重复编写基础逻辑：

// 创建路由实例，全局复用
const router = new HistoryRouter();

// 注册路由，只需要写一次业务逻辑
router.register('/home', () => {
  console.log('进入首页');
  // 首页渲染逻辑
});

router.register('/detail', () => {
  const params = router.getQueryParams();
  console.log('进入详情页，参数为：', params);
  // 详情页渲染逻辑
});

// 路由跳转，直接调用实例方法，不需要重复写pushState
router.push('/home');

// 页面加载时匹配当前路由
router._matchRoute();

进一步优化建议

如果需要更完善的能力，还可以在封装的路由类中增加以下功能，进一步减少业务层的重复代码：

• 添加路由跳转前的拦截器，统一处理权限校验、登录判断等逻辑
• 支持动态路由参数解析，比如/detail/:id这类路径的参数提取
• 增加路由跳转失败的兜底处理，比如未匹配路由时跳转到404页面
• 支持路由懒加载，统一处理组件加载的逻辑

通过这样的封装，所有通用的History路由逻辑都集中在同一个类中，业务代码只需要关注自身的渲染逻辑，不需要重复处理路由监听、跳转、参数解析等基础操作，既减少了代码量，也降低了后续维护的成本。

History_路由JavaScript前端路由代码复用路由封装修改时间：2026-06-09 03:18:23