【高频考点精讲】前端路由的两种实现原理：hash模式和history模式对比

前端路由的两种实现原理：hash模式与history模式深度解析

‍ 作者：全栈老李

更新时间：2025 年 5 月

‍ 适合人群：前端初学者、进阶开发者

版权：本文由全栈老李原创，转载请注明出处。

大家好，我是全栈老李。今天咱们来聊聊前端路由这个话题，这是现代单页应用(SPA)开发中绕不开的核心概念。路由就像是你家小区的导航系统，告诉访客该往哪走才能找到你家。而在前端世界里，路由就是告诉浏览器该显示哪个"页面"，虽然实际上只有一个HTML文件。

为什么需要前端路由？

想象一下你去餐厅吃饭，传统网站就像中餐厅——每点一道菜服务员就给你换一套餐具（整页刷新）；而单页应用更像西餐厅——一套餐具搞定所有菜品（无刷新切换内容）。前端路由就是让这套"西餐体验"成为可能的关键技术。

目前主流的前端路由实现方式有两种：hash模式和history模式。咱们一个个拆开来看。

Hash模式：老牌劲旅的智慧

Hash模式是前端路由的"老前辈"了，它的核心是利用URL中#后面的部分（hash）来实现路由切换。这个设计很巧妙，因为改变hash不会导致页面刷新，但会触发hashchange事件，让我们有机会更新页面内容。

// 全栈老李提示：这是hash路由的简单实现示例
class HashRouter {
   
  constructor() {
   
    this.routes = {
   }; // 存储路由路径和对应回调函数
    this.currentUrl = ''; // 当前路由路径
    
    // 监听hash变化事件
    window.addEventListener('load', this.refresh.bind(this), false);
    window.addEventListener('hashchange', this.refresh.bind(this), false);
  }
  
  // 注册路由和回调
  route(path, callback) {
   
    this.routes[path] = callbac