createWebHistory 与 createWebHashHistory 核心代码对比解析

本文深入剖析了 Vue Router 中 createWebHistory 与 createWebHashHistory 的本质区别——并非表面代码差异，而是根植于浏览器底层机制：前者依托 History API 实现无刷新的干净 URL 跳转，但要求服务端正确返回 index.html 以避免 404；后者利用 URL hash 变更，天然规避服务器请求、兼容老旧浏览器且零服务端配置。二者虽对外接口一致，却在路由解析逻辑、状态传递能力（如 pushState 的 state 对象）、刷新行为、事件监听机制（popstate vs hashchange）及实际网络请求表现上截然不同，是前端路由选型中必须厘清的关键技术分水岭。

核心差异不在代码长度，而在底层机制和浏览器行为触发点。两者都返回 RouterHistory 实例，但内部监听、URL 解析和导航响应方式完全不同。

createWebHistory 依赖原生 History API

它调用 history.pushState() 和 history.replaceState() 修改地址栏路径，同时监听 popstate 事件捕获前进/后退动作。URL 变化不带 #，浏览器会向服务器发起真实请求（如访问 /about 就发 GET /about 请求）。

• 初始化时检查 window.history 是否可用，不可用则抛错
• 路由跳转本质是操作浏览器历史栈，不修改 location.hash
• 刷新页面时，服务器必须返回 index.html，否则直接 404
• 支持 scrollBehavior 和 navigation guards 的完整生命周期

createWebHashHistory 依赖 URL hash 变更

它通过设置 location.hash 改变 URL，并监听 hashchange 事件响应跳转。所有路由路径都拼在 # 后面，这部分内容不会被发送到服务器。

• 初始化时自动补全缺失的 #（比如访问根路径时设为 #/）
• 每次跳转实际执行的是 location.hash = '#/xxx'
• 刷新或直接访问 https://site.com/#/admin，服务器只收到 GET / 请求，始终能返回首页
• 兼容 IE9+，无需任何服务端配置

关键方法签名与行为对比

虽然对外都提供 push()、replace()、go() 等方法，但内部实现逻辑不同：

• push({ path: '/user' }) 在 createWebHistory 中调用 history.pushState()；在 createWebHashHistory 中等价于 location.hash = '#/user'
• go(-1) 都触发浏览器原生前进/后退，但 createWebHistory 依赖 popstate 事件还原状态，createWebHashHistory 则靠 hashchange 读取新 hash 值
• createWebHistory 可携带 state 对象（用于跨跳转传参），createWebHashHistory 不支持该能力

Vue Router 初始化时的路径解析逻辑不同

两者从 URL 提取当前路由路径的方式有根本区别：

• createWebHistory 直接取 location.pathname + location.search + location.hash 中的路径部分（忽略 hash）
• createWebHashHistory 先截取 location.hash，再去除开头的 #，最后解析剩余字符串为路径
• 这意味着 https://a.com/path?k=v#/user?id=1：前者匹配 /path，后者匹配 /user

今天关于《createWebHistory 与 createWebHashHistory 核心代码对比解析》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！