单页应用路由难题全解析：Hash vs History模式深度对比

前端路由Hash与History对比解析

原创

已于 2025-10-09 08:06:47 修改 · 972 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

于 2025-10-09 07:43:34 首次发布

你是不是也遇到过这样的场景？开发单页面应用时，页面跳转后刷新一下就404，或者URL里带着难看的#号，被产品经理吐槽不够优雅？

别担心，今天我就带你彻底搞懂前端路由的两种模式，手把手教你实现一个迷你路由，并告诉你什么场景该用哪种方案。

读完本文，你能获得一套完整的前端路由知识体系，从原理到实战，再到生产环境配置，一次性全搞定！

为什么需要前端路由？

想象一下，你正在开发一个后台管理系统。传统做法是每个页面都对应一个HTML文件，切换页面就要重新加载，体验特别差。

而前端路由让你可以在一个页面内实现不同视图的切换，URL变化了但页面不刷新，用户体验流畅得像原生APP一样。

手写迷你路由：50行代码看懂原理

我们先来实现一个最简单的路由，这样你就能彻底明白路由是怎么工作的了。

// 定义我们的迷你路由类
class MiniRouter {
   
   
  constructor() {
   
   
    // 保存路由配置
    this.routes = {
   
   };
    // 当前URL的hash
    this.currentUrl = '';
    
    // 监听hashchange事件
    window.addEventListener('hashchange', this.refresh.bind(this));
  }
  
  // 添加路由配置
  route(path, callback) {
   
   
    this.routes[path] = callback || function() {
   
   };
  }
  
  // 路由刷新
  refresh() {
   
   
    // 获取当前hash，去掉#号
    this.currentUrl = location.hash.slice(1) || '/';
    
    // 执行对应的回调函数
    if (this.routes[this.currentUrl]) {
   
   
      this.routes[this.currentUrl]();
    }
  }
  
  // 初始化
  init() {
   
   
    window.addEventListener('load', this.refresh.bind(this), false);
  }
}

// 使用示例
const router = new MiniRouter();

router.init();

// 配置路由
router.route('/', function() {
   
   
  document.body.innerHTML = '这是首页';
});

router.route('/about', function() {
   
   
  document.body.innerHTML = '这是关于页面';
});

router.route('/contact', function() {
   
   
  document.body.innerHTML = '这是联系我们页面';
});

这段代码虽然简单，但包含了路由的核心逻辑：监听URL变化，然后执行对应的函数来更新页面内容。

现在你可以在浏览器里试试，访问http://your-domain.com/#/about就能看到效果了！

Hash模式：简单粗暴的解决方案

Hash模式是利用URL中#号后面的部分来实现的。比如http://example.com/#/user，#/user就是hash部分。

Hash模式的实现原理

// 监听hash变化
window.addEventListener('hashchange', function() {
   
   
  const hash = location.hash.slice(1); // 去掉#号
  console.log('当前hash:', hash);
  
  //