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

相关推荐
泡泡鱼(敲代码中)13 分钟前
Python 容器类型学习笔记:列表、元组、字典、集合
开发语言·笔记·python·pycharm
lizz227617 分钟前
Babel插件手册
javascript
2501_9336707922 分钟前
平台招商运营校招能力模型:数据分析、SQL与增长场景拆解
开发语言
菜鸟~noob2331 小时前
【Bonjour】华为Peerium架构深度解析:从冯·诺依曼到百万处理器“一台计算机”,附MATLAB性能仿真【含matlab代码,可直接运行】
开发语言·matlab·华为·peerium
白远山2 小时前
24小时自助健身房系统开发实战:从需求分析到完整指南
java·开发语言·数据库·数据挖掘·需求分析
VXbishe3 小时前
【课程设计】基于SpringBoot的乡村政务服务系统的设计与实现-计算机毕设77011
javascript·vue.js·spring boot·python·php·课程设计·政务
志尊宝3 小时前
Vue3 零基础每日笔记(037):动手封装 useMouse 与 useWindowSize——事件监听的标准模板
前端·javascript·vue.js·笔记·html5
shmily麻瓜小菜鸡4 小时前
TDD(测试驱动开发)详解
开发语言·javascript·typescript·node.js·ecmascript
三克的油4 小时前
java-学习1
java·开发语言·学习
星期八不上发条4 小时前
智能指针是什么?使用场景,循环引用解决办法,面试回答
开发语言·c++·stl