现代主流框架路由原理 hash、history的底层原理
2024-09-03 07:00:58
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- hash -->
<!-- <a href="#/hash">hash</a>
<a href="#/history">历史</a> -->
<a id="hash" href="/hash">hash</a>
<a id="history" href="/history">历史</a>
<div id="html"> </div>
<script>
//hash
// window.addEventListener('load',()=>{
// html.innerHTML = location.hash.slice(1);
// });
// window.addEventListener('hashchange',()=>{
// html.innerHTML = location.hash.slice(1)
// }); //history
function go(path) {
history.pushState({}, null, href);
html.innerHTML = href;
}
hash.onclick = function () {
let href = this.getAttribute('href');
go(href);
return false;
}
history.onclick = function () {
let href = this.getAttribute('href');
go(href);
return false;
}
window.addEventListener('popstate',()=>{
go(location.pathname);
}) </script>
</body>
</html>
最新文章
- delphi dev 汉化
- 桌面每日一句--桌面翻译工具(有道翻译,微软翻译,Google翻译)
- #Javascript:this用法整理
- js基础第七天
- Lucene索引的初步创建
- 【HDOJ】3587 NUDOTA
- ubuntu14.04 Markdown编辑器推荐之Remarkable
- htop安装步骤【原创】
- STM32+NRF24L01无线(转)
- CF518D. Ilya and Escalator [概率DP]
- AM335x关于LCD屏幕的时钟PLL配置
- 小程序开发--移动端分辨率与rpx
- springboot常见写法
- Awesome Tools
- collection管理程序中不同类别的资源
- Oracle错误——SP2-0734: 未知的命令开头 ";imp C##sin..."; - 忽略了剩余的行。
- mysql 5.7版本的下载安装
- SQL Server 学习博客分享列表(应用式学习 + 深入理解)
- ZOJ3435_Ideal Puzzle Bobble
- Contains,Exists,Any,Count 比较是否存在某个元素