历史记录

    <a  class="api a">a.html</a>
    <a  class="api b">b.html</a>
    <script>
      // 注册路由
      document.querySelectorAll('.api').forEach(item=>{
          item.addEventListener('click',(e)=>{
              e.preventDefault();
              let link=item.textContent
              window.history.pushState({name:'api'},link,link);
          },false)
      });
      // 监听路由
      window.addEventListener('popstate',(e)=>{
          console.log({
              location:location.href,
              state:e.state
          });
      },false)
    </script>
    <hr>
  <h3>Hash</h3>
    <a  class="hash c">c.html</a>
    <a  class="hash d">d.html</a>
    <script>
      document.querySelectorAll('.hash').forEach(item=>{
          item.addEventListener('click',(e)=>{
              e.preventDefault();
              let link=item.textContent;
              location.hash=link;
          },false)
      });
      window.addEventListener('hashchange',(e)=>{
          console.log({
              location:location.href,
              hash:location.hash
          })
      })
    </script>