前端路由原理

前端路由原理

========

HashChange 事件

通过监听hasgchange事件，判断location.hash的地址进行页面的转换

html 部分

<a href="#/login">点我登录</a>
<a href="#/register">点我注册</a>
<div id="content"></div>

js 部分

/*
  HashChange 事件
  url上的部分锚点数据改变，可以获取到整个事件
*/
let content = document.querySelector("#content");
window.addEventListener("hashchange", function() {
  // 根据不同的锚点值做出不同的显示
  console.log(location.hash);
  switch (location.hash) {
    case "#/login":
      content.innerHTML = "<h1>登陆页面</h1>";
      break;
    case "#/register":
      content.innerHTML = "<h1>注册页面</h1>";
      break;
    case "#/index":
      content.innerHTML = "<h1>首页</h1>";
      break;
    default:
      break;
  }
});