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

相关推荐
RunsenLIu几秒前
019 | backtrader回测布林带突破策略
开发语言·python
A_aspectJ3 分钟前
如何抓住Java开发岗的市场红利?从需求端反推学习路径
java·开发语言·职场和发展
睿智的海鸥4 分钟前
Markdown 语法大全详解
开发语言·前端·javascript·css·html
w_com.h4 分钟前
C语言中 栈、队列、双向链表
c语言·开发语言·链表
飞Link5 分钟前
【常见协议与服务】HTTP1.1、HTTP2、HTTP3:性能到底差在哪
网络·http
XS03010614 分钟前
Java 基础(九) IO流
java·开发语言·php
Highcharts.js14 分钟前
用Highcharts如何动态向一个序列添加点
前端·javascript·react.js·highcharts
Teable任意门互动15 分钟前
多维表格哪家最好用最容易上手?国产开源 Teable 测评
开发语言·数据库·开源·excel·飞书·开源软件
独隅15 分钟前
此电脑网络位置异常的AD域排错指南
开发语言·php
陈天伟教授16 分钟前
GPT Image 2
开发语言·人工智能·架构