js—路由跳转原理

客户端中的路由，实际上就是dom元素的显示和隐藏。
当页面中显示home内容的时候，about中的内容全部隐藏，
反之也是一样。
客户端路由有两种实现方式：基于hash 和基于html5 history api.
window对象 —历史对象(浏览器后退，前进，地址栏)

1、hash

Hash 方法是在路由中带有一个 #，主要原理是通过监听 # 后的 URL 路径标识符的更改而触发的浏览器 hashchange 事件，然后通过获取 location.hash 得到当前的路径标识符，再进行一些路由跳转的操作

• location.href：返回完整的 URL
• location.hash：返回 URL 的锚部分
• location.pathname：返回 URL 路径名
• hashchange 事件：当 location.hash 发生改变时，将触发这个事件

<div id="container">
  <h1>南京</h1>
  <ul>
    <li><a href="#/login">登录</a></li>
    <li><a href="#/register">注册</a></li>
    <li><a href="#/user">用户中心</a></li>
  </ul>
  <div id="content"></div>
</div>

JavaScript

var content = document.querySelector('#content');
window.onhashchange = function () {
  console.log(location);
  console.log(location.hash);
  switch (location.hash) {
    case '#/login':
      content.innerHTML = '我是登录页'
      break;
    case '#/register':
      content.innerHTML = '我是注册页'
      break;
    case '#/user':
      content.innerHTML = '我是用户中心页'
      break;
  }
}

2. html5 History Api

• history.go(n)：路由跳转，比如n为 2 是往前移动2个页面，n为 -2 是向后移动2个页面，n为0是刷新页面
• history.back()：路由后退，相当于 history.go(-1)
• history.forward()：路由前进，相当于 history.go(1)
• history.pushState()：添加一条路由历史记录，如果设置跨域网址则报错
• history.replaceState()：替换当前页在路由历史记录的信息
• popstate 事件：当活动的历史记录发生变化，就会触发 popstate 事件，在点击浏览器的前进后退按钮或者调用上面前三个方法的时候也会触发