框架hash/history实现简单原理
1.hahs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hash模式</title>
</head>
<body>
<a href="#/home">home</a>
<a href="#/about">about</a>
<div id="content">default</div>
<script>
window.addEventListener('hashchange', () => {
const content = document.getElementById('content')
// 路径匹配显示
window.location.hash === '#/home'
? (content.innerHTML = 'home')
: (content.innerHTML = 'about')
})
</script>
</body>
</html>
2.history
<!--
* @Description: 需要在在服务器访问(可以使用anywhere建立一个文件服务器,或者vscode插件Live Server),否则无效
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>history</title>
</head>
<body>
<a href="/home">home</a>
<a href="/about">about</a>
<button onclick="test()">test</button>
<button onclick="back()">back</button>
<div id="content">default</div>
<script>
function back() {
history.back()
}
function test(e) {
console.log(' ssss')
window.history.pushState({}, 'title', '/test')
}
const content = document.getElementById('content')
const aEls = document.getElementsByTagName('a')
;[...aEls].forEach(item => {
item.addEventListener('click', e => {
// 阻止默认跳转时间
e.preventDefault()
const href = item.getAttribute('href')
// 修改url
history.pushState({}, '', href)
// 修改显示内容
content.innerHTML = href
})
})
window.onpopstate = () => {
// 会导致循环 back => pop => back => pop
// history.back()
console.log('hist', history)
content.innerHTML = 'back'
}
let oldPushState = window.history.pushState
window.history.pushState = function (state, title, path) {
oldPushState.call(history, state, title, path)
window.onpushstate && window.onpushstate(state, title, path)
}
window.onpushstate = window.onpopstate = function (state, title, path) {
// back 的时候依然需要根据路径进行对应的渲染处理
content.innerHTML = location.pathname
}
</script>
</body>
</html>框架hash/history实现简单原理的更多相关文章
- Spring框架系列(2) - Spring简单例子引入Spring要点
上文中我们简单介绍了Spring和Spring Framework的组件,那么这些Spring Framework组件是如何配合工作的呢?本文主要承接上文,向你展示Spring Framework组件 ...
- Spring框架系列(13) - SpringMVC实现原理之DispatcherServlet的初始化过程
前文我们有了IOC的源码基础以及SpringMVC的基础,我们便可以进一步深入理解SpringMVC主要实现原理,包含DispatcherServlet的初始化过程和DispatcherServlet ...
- Spring框架系列(14) - SpringMVC实现原理之DispatcherServlet处理请求的过程
前文我们有了IOC的源码基础以及SpringMVC的基础,我们便可以进一步深入理解SpringMVC主要实现原理,包含DispatcherServlet的初始化过程和DispatcherServlet ...
- java中异常处理机制的简单原理
以上是自认为的java异常处理的简单原理,如有不妥之处还请各位大神帮忙指点,谢谢!
- Spring框架-IOC和AOP简单总结
参考博客: https://blog.csdn.net/qq_22583741/article/details/79589910 1.Spring框架是什么,为什么,怎么用 1.1 Spring框架是 ...
- [转帖]linux 清空history以及记录原理
linux 清空history以及记录原理 自己的linux 里面总是一堆 乱七八槽输错的命令 用这个办法 可以清空 linux的内容. 清爽一些. 1.当前session执行的命令,放置缓存中,执行 ...
- 研究一下Spark Hash Shuffle 和 SortShuffle 原理机制
研究一下Spark Hash Shuffle 和 SortShuffle 原理机制研究一下Spark Hash Shuffle 和 SortShuffle 原理机制研究一下Spark Hash Shu ...
- java——关于异常处理机制的简单原理和应用
异常处理机制的简单原理和应用 一.Execption可以分为java标准定义的异常和程序员自定义异常2种 (1)一种是当程序违反了java语规则的时候,JAVA虚拟机就会将发生的错误表示为一个异常.这 ...
- MUI框架-05-用MUI做一个简单App
MUI框架-05-用MUI做一个简单App MUI 是一个前端框架,前端框架就像 Bootstrap,EasyUI,Vue ,为了做 app 呢,就有了更加高效的 MUI,我觉得前端框架有很多,也没有 ...
- jQuery框架开发一个最简单的幻灯效果
在线演示 在这个课程中,我们将介绍如何使用jQuery来开发一个最简单的图片幻灯效果. 立刻观看互动课程:jQuery框架开发一个最简单的幻灯效果 阅读原文:jQuery框架开发一个最简单的幻灯效果
随机推荐
- vitepress 发布到 gitee上的build命令 自动设置base
docs.vitepress\config.js const argv = require('minimist')(process.argv.slice(2)) const build = argv. ...
- 计算引擎-Presto
概述 参考 高质量: B站:https://mp.weixin.qq.com/s/9_lSIFSw5o8sFC8foEtA7w https://mp.weixin.qq.com/s/NmTaJjE0U ...
- nuxt3前端开发教程
源码请移步:springboot+vue3+nuxt3+ts+minio开发的dsblog3.0前后端博客 - java大师 (javaman.cn) 目录结构如下: 一.nuxt3配置文件 这段代码 ...
- SparseTable ST表
Sparse Table ST表是一个静态二维数组st[i][j],作用是快速查询(O(1))区间最值(不只是最值,可重复贡献问题都可以用),st[i][j]代表的是在以引索i为起点,长度为\(2^j ...
- 汽车VR虚拟仿真技术如何加速自动驾驶的发展？
虚拟现实和虚拟仿真将带领自动驾驶汽车从汽车研发.体验.展厅.销售等各个环节迈入全新时代.2019 年,全球增强现实和虚拟现实市场为168 亿美元,到 2023 年,该市场的未来增长预计将超过 1600 ...
- 如何用数字人技术让课堂活起来？番职院和3DCAT实时云渲染给出答案
2023年4月20日,广州市第二届智慧教育成果巡展活动在番禺职业技术学院(下文简称番职院)举行,本次活动的主题是''智能AI助教-让课堂活起来''. 活动现场,瑞云科技受邀展示了其自主研发的瑞云数字人 ...
- 3DCAT亮相糖酒会，为元宇宙展会提供实时云渲染支持
4月12日,第108届全国糖酒商品交易会(下文简称"糖酒会")在成都正式开幕,吸引了众多酒类企业和行业人士的参与. 图片源自新华社 本次糖酒会上,某展会采用了"双线&qu ...
- FreeRTOS教程8 任务通知
1.准备材料 正点原子stm32f407探索者开发板V2.4 STM32CubeMX软件(Version 6.10.0) Keil µVision5 IDE(MDK-Arm) 野火DAP仿真器 XCO ...
- TP6框架--EasyAdmin学习笔记：定义路由
这是我写的学习EasyAdmin的第二章,这一章我给大家分享下如何定义一条路由 正常的tp6定义路由方法如下: /route/admins/app.php 文件内容 //路由变量自定义 Route:: ...
- Matlab绘图(1)通过属性检查器调整绘图
Matlab图形属性检查器 和其他语言的绘图不一样的是,Matlab允许我们通过非编程的方式来自定义调整绘图.下面介绍Matlab图形的构成以及几种调整绘图时的常用操作. 图形构成 什么是Figure ...