前端路由的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 支持	不支持	支持
开发与部署复杂度	简单，无需服务器配置	需要配置服务器，增加开发复杂度