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

相关推荐
码农水水5 小时前
国家电网Java面试被问:TCP的BBR拥塞控制算法原理
java·开发语言·网络·分布式·面试·wpf
浮尘笔记5 小时前
Go语言临时对象池:sync.Pool的原理与使用
开发语言·后端·golang
集成显卡6 小时前
Bun v1.3.6 发布:内置 Tarball 归档支持、JSONC 解析、Bundle 分析增强等重磅更新!
javascript·新版本·bun.js
咕噜咕噜啦啦6 小时前
Java期末习题速通
java·开发语言
奔跑的web.6 小时前
TypeScript Enum 类型入门:从基础到实战
前端·javascript·typescript
BHXDML6 小时前
第七章:类与对象(c++)
开发语言·c++
盐真卿6 小时前
python2
java·前端·javascript
梦梦代码精6 小时前
BuildingAI vs Dify vs 扣子:三大开源智能体平台架构风格对比
开发语言·前端·数据库·后端·架构·开源·推荐算法
又见野草7 小时前
C++类和对象(中)
开发语言·c++
kgduu7 小时前
js之表单
开发语言·前端·javascript