现在为了提高网站的用户体验，如添加页面切换动画，减少页面加载，很多网站为此都采用了无刷新技术来加载页面内容。目前很多框架都是实现了这一点来开发单页应用，比如angular，vue，react等，这篇文章将简单的介绍无刷新技术的一些实现方式。

hash路由的实现 

hash是指url带 # 号的形式，采用这种方式方式兼容性比较好。我们只需要改变‘#’后面的内容，更新URL是不会引起页面跳转的。例如：

<a href="#/index">index</a>
<a href="#/about">about</a>

当点击了a标签后，url将会改为：域名/#index的样子，这里我们只需要通过js来监听URL的改变，如下：

window.addEventListener('hashchange',callback);

当监听到路由变化后，我们需要根据路由的变化通过callback回调函数来映射不同的页面，这里需要注意的在callback中不要去操作url,否则会出现死循环。下一步我们对路由进行注册，不同的路由执行不同的事情：

var routers=[
	{path:'#index',component:function(){
		console.log('index')
	}},
	{path:'#about',component:function(){
		console.log('about')
	}},
];

最后把routers和callback关联起来

function callback(){
	for(r in routers){
		if(routers[r].path==location.hash){
			routers[r].component();
		}
	}
}

到这里点击不同的链接，我们在控制台可以看到对应的输出。然后里面的内容就需要我们异步去加载数据，然后渲染成dom,追加到页面即可。类似于

<!--html结构--->
<div id="main"></div>
<script>
var template='<div>渲染后的模板</div>';				
document.getElementById('main').innerHTML=template;
</script>

这就是一个最简单的通过hash路由来实现页面的无刷新更新页面的。写的很简单，也很丑陋，但是思路就是这样。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/38