前端路由(二)hash实现路由示例

hash实现路由示例

前端路由(一) 路由,hash,history

前提

• window.location对象
• window.location.hash对象
• 通过设置a标签的href属性来设置哈希值，当用户点击该a标签时即可改变页面的哈希值
• 根据哈希值的变化来使相应元素显示或者隐藏，从而实现页面无刷新的单页切换。

代码

    <!--css-->
    <style>
      .page {
        display: none;
      }
      .page.cur {
        display: block;
      }
    </style>
    <!--html-->
    <article class="container">
      <section id="page1" class="page cur">1</section>
      <section id="page2" class="page">2</section>
      <section id="page3" class="page">3</section>
    </article>
    <nav id="nav" class="bottom-nav">
      <ul>
        <li>一</li>
        <li>二</li>
        <li>三</li>
      </ul>
    </nav>
    <!--js-->
    <script>
      window.onload = function() {
        var nav = document.getElementById('nav');
        var navLi = nav.getElementsByTagName('li');
        var navLen = navLi.length;
        for (let i=0; i<navLen; i++) {
          navLi[i].onclick = function() {
            location.hash = 'page' + (i+1);
          }
        }
        location.hash = 'page1'
        window.onhashchange = function(e) {
          //当hash变化时，执行hashchange事件，该事件具有oldURL和newURL两个事件属性，分别代表前一个URL和目前的URL
          var oldHash = e.oldURL.split('#')[1]; //取得前一个hash
          var newHash = e.newURL.split('#')[1]; //取得当前hash
          var oldPage = document.getElementById(oldHash);
          var newPage = document.getElementById(newHash);
          oldPage.classList.remove('cur'); //隐藏前一个page
          newPage.classList.add('cur');  //显示当前page
        }
      }
    </script>
复制代码