SPA路由的实现在前端有两种方式：hash和history，其中hash的方式兼容想较好，history只适用于HTML5浏览器。
hash方式
此种方式通过改变hash值来实现路由的跳转，改变hash值并不会发生请求到后端，所以不需要后端配置路由。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>spa 测试</title>
<style>
.btn {
text-align: center;
}
#content {
width: 200px;
margin: 20px auto 20px auto;
border: 1px solid #cccccc;
text-align: center;
padding: 50px 0;
}
</style>
</head>
<body>
<div id="content"></div>
<div class="btn">
<button id="prev">上一页</button>
<button id="next">下一页</button>
</div>
<script>
var page = 1;
var content = document.getElementById('content');
document.getElementById('prev').addEventListener('click', function () {
history.back();
});
document.getElementById('next').addEventListener('click', function () {
page++;
location.hash = '#' + page;
});
window.addEventListener('hashchange', function () {
var hash = location.hash.slice(1);
page = Number(hash) || 1;
content.innerText = '页面' + hash;
});
</script>
</body>
</html>
history方式
此种方式会直接更改掉地址栏的url路径，当在地址栏刷新页面时，会直接发送请求到后台，此时如果后台不存在由history API生成的url时，将返回404页面，所以要使用这种方式实现SPA路由，必须要后端配合。
<script>
document.getElementById('next').addEventListener('click', function () {
page++;
content.innerText = '页面' + page;
// pushState和replaceState不会触发popstate事件，只有使用history API后退和前进操作，或者用户在地址栏前进/后退才会触发popstate
history.pushState({ page: page }, '', '/' + page);
});
window.addEventListener('popstate', function (e) {
var state = e.state || {};
page = state.page || 1;
content.innerText = '页面' + state.page;
});
</script>