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

相关推荐
山河木马4 小时前
渲染管线-计算得到gl_Position(顶点着色器)之后续GPU流程
javascript·webgl·图形学
竹林8185 小时前
用 The Graph 查询链上数据实战:从手搓 RPC 到 Subgraph,我的 NFT 项目数据加载快了 10 倍
前端·javascript
kyriewen7 小时前
别再每次都 Google 了:我整理了前端日常最常踩的 10 个 Git 坑,附速查表
前端·javascript·git
SmartBoyW8 小时前
深入ECMAScript规范:彻底搞懂JS隐式类型转换与底层ToPrimitive机制
前端·javascript
用户852495071849 小时前
解密 JavaScript 中的 this:谁才是真正的调用者?
javascript·面试
Heo9 小时前
Vite进阶用法详解
前端·javascript·面试
铁皮饭盒10 小时前
Next.js 风格路由内置?Bun FileSystemRouter 凭啥这么香
javascript
小林ixn11 小时前
别再背八股了!从 5 个真实场景彻底搞懂 JavaScript 的 this
javascript
东风破_12 小时前
JavaScript 面试常考的字符串算法:从反转字符串到回文判断
前端·javascript
巴勒个啦12 小时前
D3.js 入门实战:用力导向图可视化项目依赖关系
javascript