Bootstrap

前端路由的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 的项目。

;