单页面路由实现原理-hash

最新推荐文章于 2022-03-09 08:47:53 发布

zhongshizhi91

最新推荐文章于 2022-03-09 08:47:53 发布

阅读量868

点赞数

分类专栏：路由文章标签： javascript 前端

本文链接：https://blog.csdn.net/shuxiaoxii/article/details/121259397

版权

路由专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端开发中的路由,其实就是操作url地址

改变浏览器地址
内容区切换内容

hash的特点

改变url的时候, 不会刷新页面
当一个窗口的 hash （URL 中 # 后面的部分）改变时就会触发 hashchange 事件（location.hash）。
hashchange 用它来监听url路径变化

实现一个最简单的hash单页应用

事件委托
window.location.hash改变
hashchange事件监听
改变页面内容

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title>Title</title>
  <style>
    a,#divId{
      font-size: 33px;
    }

  </style>
</head>
<body>
  <ul id='shijianweituo'>
    <li>
      <a data-url='/aa'>
        aaaa
      </a>
    </li>
    <li>
      <a data-url='/bb'>
        bbbbb
      </a>
    </li>
    <li>
      <a data-url='/cc'>
        ccccc
      </a>
    </li>
  </ul>
  <div id='divId'>默认内容</div>
<script>
   var _path = '';
   const pathData = [
     {
       path: '/aa',
       pathData: 'aaaaa页',
     },
     {
       path: '/bb',
       pathData: 'bbbbbb页',
     },
     {
       path: '/cc',
       pathData: 'ccccc页',
     },
   ];
   let _aBtn = document.getElementsByTagName('a');
   let _divId = document.getElementById('divId');

   // 事件委托
   document.getElementById('shijianweituo').addEventListener('click', function(e){
     // 使用事件委托监听 li的监听事件
     // 这样改下就只有点击li会触发事件了，且每次只执行一次dom操作，如果li数量很多的话，将大大减少dom的操作，优化的性能可想而知！
     // https://www.cnblogs.com/lauzhishuai/p/11263210.html
     _path = e.target.dataset.url; // 获取新路由
     window.location.hash = _path; // 改变浏览器的# 号后的参数值
   });

   window.addEventListener('hashchange', function(){
     pathData.find((y) => {
       if(y.path === _path){
         _divId.innerHTML = y.pathData;
         return true;
       }else{
         return false;
       }
     })
   });

</script>
</body>
</html>