前端路由的hash模式和history模式

hash 模式和 history 模式是前端路由实现的两种常见方式,分别基于不同的浏览器特性实现。下面从浏览器实现、前端框架实现及相关标准定义三个方面详细解释这两种模式。

1. 浏览器实现

1.1 Hash 模式

核心机制

• 基于浏览器的 location.hash 属性和 hashchange 事件。

• # 后的内容(如 #home)被称为 "fragment identifier",不会被浏览器发送到服务器,因此只在前端有效。

特点

• 改变 location.hash 不会重新加载页面。

• 支持 hashchange 事件监听,当 hash 改变时触发回调函数。

• 兼容性较好,适用于所有主流浏览器(包括较老的浏览器)。

实现示例

复制代码
window.location.hash = '#home'; // 改变 hash 值
window.addEventListener('hashchange', () => {
  console.log('Hash changed to:', window.location.hash);
});

1.2 History 模式

核心机制

• 基于 HTML5 的 history.pushState() 和 history.replaceState() 方法。

• 允许动态更改浏览器地址栏的 URL,同时不会触发页面刷新。

• 可通过 popstate 事件监听历史记录的变化。

特点

• URL 更加优雅,无需 # 符号,像传统的服务器路由一样。

• 浏览器的前进、后退按钮可以正常使用。

• 需要服务器配置支持,否则刷新页面会导致 404 错误。

实现示例

复制代码
window.history.pushState({ page: 1 }, 'Title 1', '/page1'); // 修改 URL
window.addEventListener('popstate', (event) => {
  console.log('History changed:', event.state);
});

2. 前端框架实现

前端框架(如 Vue Router、React Router)对 hash 和 history 模式进行了封装,提供了统一的路由管理功能。

2.1 Hash 模式实现

路由表

前端框架通常会维护一个路由表,将 hash 值映射到对应的组件。

URL 变化监听

通过监听 hashchange 事件,获取当前的 location.hash,匹配到相应的路由。

示例

Vue Router 配置 hash 模式:

复制代码
export default new VueRouter({
  mode: 'hash',
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About },
  ],
});

2.2 History 模式实现

路由表

与 hash 模式类似,前端框架也会维护一个路由表,将路径映射到组件。

URL 操作

使用 history.pushState() 和 history.replaceState() 修改 URL。

URL 变化监听

通过监听 popstate 事件来处理浏览器的前进和后退。

示例

Vue Router 配置 history 模式:

复制代码
export default new VueRouter({
  mode: 'history',
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About },
  ],
});

3. 相关标准定义

3.1 Hash 模式的标准

来源 :fragment identifier 的定义最早出现在 URI 标准 中。

定义

• # 后的部分不会影响服务器请求,仅用于客户端处理。

• 典型用途包括页面内导航和 AJAX 加载内容。

3.2 History 模式的标准

来源:HTML5 规范,定义了 History API。

核心 API

• pushState(state, title, url):添加一条新的浏览历史记录。

• replaceState(state, title, url):修改当前的历史记录。

• popstate 事件:当用户通过浏览器的前进、后退按钮改变历史记录时触发。

优势

• 提供了与服务器路由一致的 URL 格式,更符合现代 Web 应用需求。

• 能保存页面状态,可用于复杂的单页应用(SPA)。

4. 两者的对比总结

特性 Hash 模式 History 模式
URL 形式 带有 #,如 /#/home 无 #,如 /home
改变 URL 的方式 location.hash pushState() 和 replaceState()
刷新页面是否支持 不依赖服务器,刷新不会 404 需要服务器支持,否则刷新会 404
浏览器兼容性 兼容性好,适用于较老的浏览器 依赖 HTML5,较老浏览器(如 IE9 以下)不支持
SEO 支持 不支持 支持
开发与部署复杂度 简单,无需服务器配置 需要配置服务器,增加开发复杂度

总结

• Hash 模式:简单易用,适合小型或不需要 SEO 的项目。

• History 模式:现代化、SEO 友好,适合大型或需要优雅 URL 的项目。

相关推荐
喜葵2 分钟前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_6 分钟前
分片上传-
前端·javascript·状态模式
东北南西10 分钟前
手写React状态hook
前端·javascript·react.js
诗书画唱11 分钟前
【前端教程】JavaScript DOM 操作实战案例详解
开发语言·前端·javascript
lypzcgf12 分钟前
Coze源码分析-资源库-删除提示词-前端源码
前端·typescript·react·ai应用·coze·coze源码分析·智能体平台
代码青铜13 分钟前
【实战指南】Cursor前端+Zion后端:10分钟打造能收款的AI商业应用MVP
前端·人工智能
quan263141 分钟前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
GIS之路42 分钟前
GDAL 读取影像元数据
前端
qb1 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
小桥风满袖1 小时前
极简三分钟ES6 - 类与继承
前端·javascript