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

相关推荐
清汤饺子3 小时前
OpenClaw 本地部署教程 - 从 0 到 1 跑通你的第一只龙虾
前端·javascript·vibecoding
颜酱3 小时前
图的数据结构:从「多叉树」到存储与遍历
javascript·后端·算法
橙某人7 小时前
LogicFlow 小地图性能优化:从「实时克隆」到「占位缩略块」!🚀
前端·javascript·vue.js
boooooooom8 小时前
讲清 Proxy + effect + track/trigger 流程
javascript·vue.js·面试
leafyyuki8 小时前
在 Vue 项目中玩转 FullCalendar:从零搭建可交互的事件日历
前端·javascript·vue.js
豆苗学前端8 小时前
彻底讲透浏览器缓存机制,吊打面试官
前端·javascript·面试
swipe9 小时前
箭头函数与 this 面试题深度解析:从原理到实战
前端·javascript·面试
进击的尘埃10 小时前
拖拽搭建场景下的智能布局算法:栅格吸附、参考线与响应式出码
javascript
小猪努力学前端11 小时前
基于PixiJS的试玩广告开发-续篇
前端·javascript·游戏
wuhen_n11 小时前
v-model 的进阶用法:搞定复杂的父子组件数据通信
前端·javascript·vue.js