框架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框架开发一个最简单的幻灯效果
随机推荐
- C#移除List中特定元素
在List里面移除其中一个元素之后,原有的索引以及索引对应的值会发生改变,如果按照原有的索引值删除,就会误删除其它元素. 1.实现思路 原始List为A,将需要删除的元素放到一个List B里面,遍历 ...
- 摆脱鼠标系列 Trigger Suggest 快捷键 改成 Shift + Space
摆脱鼠标系列 Trigger Suggest 快捷键 改成 Shift + Space 看marp插件的时候,发现用ctrl + space 自动提示,但是我这里是输入法
- SourceTree 摘樱桃 === 遴选 [不要使用这个功能！！不要使用！不要使用！]
SourceTree 摘樱桃 === 遴选 不要使用摘樱桃!!不要使用!不要使用! 我找了一个文本的git,进行的测试,发现很不好用,文档我又恢复过来了,因为就改了几个字,代码的话,会造成 不可挽回的 ...
- Python使用pyecharts库构建股票交易 可交互可视化展示——基于Tushare大数据开放社区
Python使用pyecharts库构建股票交易 可交互可视化展示--基于Tushare大数据社区 1.前言 大家好!欢迎各位访问我的博客,今天给大家分享的是 python使用pyecharts库构建 ...
- MAKEFILE的学习
Makefile/cmake/configure 重点学习Cmake 首先是简单的MakeFile入门 1.1 简单Makefile 范例1.1 all: @echo "Hello all& ...
- 前端 nodejs 命令行自动调用编译 inno setup 的.iss文件
项目中需要把前端代码用 electronjs 打包成 windows 安装包 使用的是开源的 inno setup 制作安装包 官网 虽然 ElectronJS 也有 electron-builder ...
- jenkins安装和基本使用
参考:https://zhuanlan.zhihu.com/p/56037782(安装) https://gitee.com/oschina/Gitee-Jenkins-Plugin/(使用) htt ...
- 【2310. 个位数字为 K 的整数之和】背包
import java.util.*; class Solution { public static void main(String[] args) { Solution solution = ne ...
- 作用域&变量提升&闭包题目及内容解答
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 1. 代码输出结果 (function(){ var x = y = 1; })(); var z; console.log(y); // ...
- 使用 Kotlin DSL 编写网络爬虫
本博文将会通过一个网络爬虫的例子,向你介绍 Kotlin 的基本用法和其简洁有力的 DSL. 关于DSL 按照维基百科的说法,DSL(domain-specific language) 是一种专注于某 ...