单页面路由实现原理-history
Posted 芜独独
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了单页面路由实现原理-history相关的知识，希望对你有一定的参考价值。
单页面路由实现原理
history对象
主要使用了pushState()和popstate事件
pushState()可以改变url地址，而不刷新页面
popstate事件在浏览器点击前进后退时触发
pushState(state,title,url)有三个参数:
1.state:可在用户在浏览器点击前进后退时,他会以回调的方式,传入一些数据
2.title:新页面的标题
3.url:新的网址,在浏览器地址栏显示
代码
<!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>
<style type="text/css">
a,
#divId
font-size: 33px;
</style>
</head>
<body>
<!-- data-url是自定义的属性 -->
<ul>
<li><a data-url="#/aa">aaa</a></li>
<li><a data-url="#/bb">bbb</a></li>
<li><a data-url="#/cc">ccc</a></li>
</ul>
<div id="divId">默认内容</div>
</body>
<script>
// 路由数据
var _routeData = [
path: '#/aa',
pathData: 'aaaaaa页'
,
path: '#/bb',
pathData: 'bbbbbb页'
,
path: '#/cc',
pathData: 'cccccc页'
, ];
// 获取数据
var _aBtn = document.getElementsByTagName("a");
// 内容区
var _divId = document.getElementById("divId");
// 路由变量
var _path;
// 更新视图
function refresh(_path)
// 修改匹配内容
_routeData.map(item =>
// 当路由匹配时，更改div里面的内容
if (_path == item.path)
_divId.innerHTML = item.pathData;
)
for (var i = 0; i < _aBtn.length; i++)
// 批量处理监听按钮事件
_aBtn[i].addEventListener('click', function()
// console.log(this.getAttribute('data-url')); 检查按钮是否被监听到
_path = this.getAttribute('data-url');
// 通过pushState传入url地址
history.pushState(
a: 'talk is cheap , show me the code' //传入数据
, null, _path);
// 调用更新视图的方法
refresh(_path)
)
// 点击浏览器前进后退时popstate才会触发
window.addEventListener('popstate', function(_a)
console.log(location.hash); //获取url中#右边的部分
refresh(location.hash); //点击页面前进后退也会更新div的内容
console.log(_a); //检验数据是否被传入,state里面
)
</script>
</html>
以上是关于单页面路由实现原理-history的主要内容，如果未能解决你的问题，请参考以下文章