单页应用的原理

单页应用的原理

<a href="#home">首页</a>
  <a href="#help">帮助中心</a>
  <h1 id="main"></h1>

/**
 * 单页应用原理:
 * 只有 # 后面的 fragment 发生改变时，页面不会重新请求，其他参数发生变化，都会引起页面的重新请求。
 * window.onhashchange事件能监听fragment的变化。
 */
document.getElementById("main").innerHTML = "404";
window.onhashchange = function() {
  let page = location.hash;
  if (page === "#home") {
    document.getElementById("main").innerHTML = "这是首页";
    return;
  } else if (page === "#help") {
    document.getElementById("main").innerHTML = "这是帮助页面";
    return;
  }
};