一下所述如有疑问，可在微信与本人聊，如与技术无关请勿加本人微信；
1 使用location.hash值实现spa；
即：location.hash;
原理：1 使用事件监听，监听事件hashchange，看window.location.hash的值；
2 switch条件语句，对不同的hash，设置不同的展示内容；
3 获取不同的内容时，用ajax发送请求，请求后台数据，成功时，返回获取的数据，遍历数据，展示相应的数据；
<!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>
<script src="./js/jquery-1.12.4.min.js"></script>
<style>
a{
text-decoration:none;
margin-left: 1rem;
}
input{
width: 10rem;
height: 2rem;
border: 1px solid black;
margin-top: 1rem;
}
</style>
</head>
<body>
<a href="#Tom">Tom</a>
<a href="#Jom">Jim</a>
<a href="#Limei">Limei</a>
</br>
<input type="text" name="" id="name" readonly>
<input type="text" name="" id="text" readonly>
<script type="text/javascript">
//获取默认的hash值，并赋值；
var hash = window.location.hash;
showContent(hash);
// 监听hash值的改变
window.addEventListener('hashchange',function(){
// 将hash值赋给hash
hash = window.location.hash;
showContent(hash);
});
// hash 的对应展示内容
function showContent(hashs){
switch(hash){
case "#Tom":
$.ajax({
url:"./json/allname.json",
success:function(data){
$("#name").val(data[0].name);
$("#text").val(data[0].text);
}
});
break;
case "#Jom":
$.ajax({
url:"./json/allname.json",
success:function(data){
$("#name").val(data[1].name);
$("#text").val(data[1].text);
}
});
break;
case "#Limei":
$.ajax({
url:"./json/allname.json",
success:function(data){
$("#name").val(data[2].name);
$("#text").val(data[2].text);
}
});
break;
default:
$.ajax({
url:"./json/allname.json",
success:function(data){
$("#name").val(data[0].name);
$("#text").val(data[0].text);
}
});
}
}
</script>
</body>
</html>
2 h5中的history;
即：window.history;
原理涉及的知识点：
1 history中原始的方法：
history.back(); 与在点击后退按钮相同；
history.forword(); 与在点击前进按钮相同；
history.go() 接受一个整数,跳转到整数指定的页面，go(1) 相当于forword，go(-1)相当于back；go(0) 相当于刷新页面；
2 h5中新增的方法：pushState()方法和replaceState()方法，这 push两个方法可以向历史栈中添加数据，就好像url（）变化了一样；这样就可以模拟浏览前进和后退的，前端路由也是同理；
（1）history.pushState(stateObj,title,url)；
stateObj:一个与指定网址相关的状态对象，popstate事件触发；该对象会传入回调函数。如果不需要这个对象，可以传入null；
title：新页面的标题；
url:新的地址，必须与当前页面处于同一域，浏览器的地址将显示这个网址;
注意：
1 pushState() 方法不会触发页面刷新，只是导致history对象发生变化，只有back（），forword（），go（） 才会使浏览器刷新；
2 这里的url是同源策略限制的，用来防止恶意脚本模仿其他网站的url来欺骗用户，所以当违背同源策略时会报错；
（ 2 ）history.replaceState(stateObj,title,url);
替换当前浏览历史的当前记录；其余和pushState() 一样；
(3) popState事件；
定义：每当同一个文档的浏览历史（即history对象）出现变化时，就会触发popState；
注意：仅仅调用pushState和replaceState方法，并不会触发该事件，当用用户点击后退和前进的时候才会触发，或者使用javascript调用back(),go(),forword()方法时才触发；另外事件只针对同一个文档，如果历史浏览的历史加载，导致加载不同的文档，该事件也不会触发；
用法： 使用的时候，可以为popState事件指定回调函数。这个回调函数的参数是一个event事件对象；他的state的属性指向pushState（）和 replaceState（）方法为当前url所提供的转态对象（即第一个参数）；
总结：
1 获取按钮，对不同按钮绑定对应浏览器向前，和向后浏览的事件；
2 由于history会自动触发popstate事件，输出不同地址，对应不同的内容即可；
5 history实现spa前端路由代码
<!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>
<a class="api a">a.html</a>
<a class="api b">b.html</a>
<br>
<input type="text" name="" id="">
<button class="loca back">Back</button>
<button class="loca forword">Forword</button>
<script>
//注册路由
document.querySelectorAll('.api').forEach(item => {
item.addEventListener('click',e=>{
e.preventDefault();
let link = item.textContent;
console.log(link);
if(!!(window.history && history.pushState)){
window.history.pushState({name:'api'},link,link);
console.log(window.history);
}else{
console.log(window.history+'00');
}
},false)
});
//监听路由
window.addEventListener('popstate',e=>{
let loc = location.href.split("/");
console.log(loc);
console.log({
location:loc[3],
state:e.state
});
document.querySelector('input').value = loc[3];
},false)
//绑定事件，向前绑定，向后绑定
document.querySelectorAll('.loca').forEach(item =>{
item.addEventListener('click',function(){
let sign = item.textContent;
if(!!sign){
if(sign === "Back"){
window.history.back();
}else{
window.history.forward();
}
}
})
});
</script>
</body>
</html>