vue SPA设计 history hash

<body>
  <h3>Histort api</h3>
  <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>

  <p>------------------</p>

  <h3>Hash</h3>
  <a class="hash a">#a.html</a>
  <a class="hash b">#b.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
      });
    }, false)
  </script> 
</body>
posted @ 2019-11-14 19:50  guangzan  阅读(249)  评论(0编辑  收藏  举报