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

相关推荐
一只鹿鹿鹿23 分钟前
信息化项目管理规范(参考Word文件)
java·大数据·运维·开发语言·数据库
XGeFei28 分钟前
python中子线程与主线程的关系
开发语言·python
kyriewen29 分钟前
面试8家前端岗位后,我发现了一个残酷的事实:AI不是加分项,是门槛
前端·javascript·面试
Chase_______31 分钟前
【Java杂项】final 关键字详解:变量、方法、类限制与引用可变性
java·开发语言·python
ruxingli41 分钟前
Golang iota详解
开发语言·后端·golang
我材不敲代码42 分钟前
Python venv 虚拟环境从入门到精通 + uv 高性能替代工具实战指南
开发语言·python·uv
l1t1 小时前
DeepSeek总结的使用实体-组件-系统和基于存在性处理进行Python编程18-20
开发语言·python
磊 子1 小时前
STL之deque和list以及两者与vector的对比
开发语言·c++·list
凤山老林1 小时前
DDD(领域驱动设计)在复杂业务系统中的落地指南
java·开发语言·数据库·ddd·领域驱动
凯瑟琳.奥古斯特1 小时前
子查询原理与实战案例解析
开发语言·数据库·职场和发展·数据库开发