中国建材网官方网站,wordpress更新文章post.php错误,软件商店oppo版本最新版,宁夏建设厅官方网站hash 模式和 history 模式是前端路由实现的两种常见方式#xff0c;分别基于不同的浏览器特性实现。下面从浏览器实现、前端框架实现及相关标准定义三个方面详细解释这两种模式。
1. 浏览器实现 1.1 Hash 模式
• 核心机制#xff1a;
• 基于浏览器的 location.hash 属性…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 的项目。
