h1 前端路由的原理

html:

<a href="#/login">login</a> <a href="#/register">register</a>

<div id="app"></div>

js:

// 当一个窗口的 hash （URL 中 # 后面的部分）改变时就会触发 hashchange 事件（参见 location.hash）。
// onhashchange 事件在当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发 
// location.hash (包含块标识符的DOMString，开头有一个“#”。)
var aDiv = document.getElementById('app');
window.onhashchange = function () {
  console.log(location.hash);
  switch (location.hash) {
    case '#/login': 
      aDiv.innerHTML = '<h2>我是登陆界面</h2>';
      break;
    case '#/register': 
      aDiv.innerHTML = '<h2>我是注册界面</h2>';
      break;
    default:
      break;
  }
}