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

相关推荐
Brilliantwxx3 分钟前
【Linux】 软件包管理器(yum)+ Vim使用
linux·运维·服务器·开发语言·编辑器·vim
雪的季节7 分钟前
Python 线程同步与异步编程 全解析
java·开发语言
Quz14 分钟前
QML 与 JavaScript 交互方式:内联函数、外部文件、信号槽与工作线程
javascript·qt
超级赛博搬砖工14 分钟前
并发、多线程和HTTP连接之间有什么关系?
网络·网络协议·http
520拼好饭被践踏26 分钟前
JAVA+Agent学习day22
java·开发语言·后端·学习
笨蛋不要掉眼泪37 分钟前
Java虚拟机:堆的参数配置
java·开发语言·jvm
Allshadow39 分钟前
Nest.js - 连接数据库
javascript·nestjs
冰暮流星43 分钟前
javascript之date对象
开发语言·javascript·ecmascript
橘子星44 分钟前
别光看教程!手把手拆解 React Todo 项目,一文吃透 5 个核心概念
前端·javascript
蜡台1 小时前
使用 uni-popup 实现数据选择器Data-Picker
前端·javascript·html·uniapp·uni-popup·data-picker