hash 模式和 history 模式的实现原理

hash 模式和 history 模式的实现原理:

  • #后面的 hash 值的变化不会导致浏览器向服务器发出请求,浏览器不发出请求,就不会刷新页面。通过监听 hashchange 事件的变化可以知道 hash 值发生了哪些变化,然后根据 hash 值的变化来实现更新页面部分内容的操作
  • history 模式的实现主要是通过 HTML5 标准发布的两个 api,pushstate 和 replacestate。这两个 api 可以改变 url,但不会发出请求。这样可以监听 url 的变化来实现页面部分内容的更新。
    hash 模式和 history 模式的区别主要有:

1.首先是 url 的展示上 hash 有#而 history 没有

2.刷新页面时,hash 模式可以加载 hash 值对应的页面;history 模式下如果没有处理,则会返回 404,一般需要后端对所有页面配置重定向到首页路由。

3.hash 可以兼容低版本的浏览器以及 ie

相关推荐
智购科技自动售货机厂家22 分钟前
2026自动售货机AI视觉识别优化:从YOLOv11n模型量化到RKNN部署的端侧推理工程实践~YH
javascript·人工智能·yolo·机器学习·计算机视觉·目标跟踪·perl
晓说前端25 分钟前
TypeScript 核心语法应用 —— Vue 3 中的使用(下)
前端·javascript·typescript·类型系统
千里码aicood39 分钟前
基于Python的电商数据采集系统(大数据+爬虫)
开发语言·python
陈皮波比茶1 小时前
Python项目实战-网络机器人(爬虫)
开发语言·网络·爬虫·python·机器人
法哥20122 小时前
用 C++ 控制 CMW100,到底在干什么?
开发语言·c++
QH139292318802 小时前
NVIDIA H200 H300服务器
运维·服务器·开发语言·网络·信息与通信
OPEN-F3 小时前
Python进阶教程:单元测试与代码质量
开发语言·python·单元测试
阿里嘎多学长3 小时前
2026-08-20 GitHub 热点项目精选
开发语言·程序员·github·代码托管
其实防守也摸鱼3 小时前
Codex破局:前端组件秒级生成的技术文章大纲
开发语言·前端·人工智能·学习·安全·web安全
Logintern093 小时前
装饰器和洋葱模式的区分
开发语言·python·架构