写在开头：
在网上看到一篇介绍实现简易基础版单页面应用的分享，贴上原地址：
[https://segmentfault.com/a/1190000003786176](https://segmentfault.com/a/1190000003786176)。
先是跟着文章中一步步实现，后面又加上了一些自己想法。
基础代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div id="app">
<nav id="nav"></nav>
<div id="container"></div>
</div>
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
app.js
var $nav = $("#nav");
var sLi = ["home", "about", "article", "history"].reduce(function(pre, n) {
return pre + "<li><a href='/" + n + "'>" + n + "</a></li>";
}, "");
var sUl = "<ul>" + sLi + "</ul>";
$nav.html(sUl);
var $container = $("#container");
$("#nav ul li").on("click", function() {
var route = $(this).find("a").text();
history.pushState({ title: route }, route, route);
show();
return false;
});
function show() {
var route = window.location.pathname;
if (route === "/home" || route === "/") {
$.get("/api/home", function(data) {
$container.html(data.join("") + "!");
});
} else {
$container.html("这是" + route + "区域哦");
}
}
show();
window.addEventListener("popstate", show);
test.json
{
"lis": ["今", "天", "是", "个", "好", "天", "气"]
}
发现问题
当地址栏的地址为：[http://127.0.0.1:8011/home]或者其他的时候刷新页面，页面显示404。因为我并没有home.html。所以对app.js做了一些调整
var $nav = $("#nav");
var sLi = ["home", "about", "article", "history"].reduce(function(pre, n) {
return pre + "<li><a href='/" + n + "'>" + n + "</a></li>";
}, "");
var sUl = "<ul>" + sLi + "</ul>";
$nav.html(sUl);
var $container = $("#container");
$("#nav ul li").on("click", function() {
var route = $(this).find("a").text();
history.pushState({ title: route }, null, "#/" + route);
show();
return false;
});
function show() {
var route = window.location.hash;
if (route === "#/home" || route === "" || route === "#/") {
$.get("data/test.json", function(data) {
$container.html(data.lis.join("") + "!");
});
} else {
$container.html("这是" + route + "区域哦");
}
}
show();
window.addEventListener("popstate", show);
分析修改内容
1. history.pushState({ title: route }, null, "#/" + route);
把地址改为"/#/XXX"。这是参考网易云音乐的pc网站，加了“#”，刷新的就是当前页面。
2. var route = window.location.hash;
地址改为"/#/XXX"之后，window.location.pathname获取得到的全部都是"/",window.location.hash获取的是"#/XXX"