浅析前端路由

<ul>
  <li><a href="#/page1">page1</a></li>
  <li><a href="#/page2">page2</a></li>
</ul>
<!--渲染对应组件的地方-->
<div id="route-view"></div>

<script type="text/javascript">
  // 第一次加载的时候，不会执行 hashchange 监听事件，默认执行一次
  // DOMContentLoaded 为浏览器 DOM 加载完成时触发
  window.addEventListener('DOMContentLoaded', Load);
  window.addEventListener('hashchange', HashChange);
  // 展示页面组件的节点
  var routeView = null;
  function Load() {
    routeView = document.getElementById('route-view');
    HashChange();
  }
  function HashChange() {
    // 每次触发 hashchange 事件，通过 location.hash 拿到当前浏览器地址的 hash 值
    // 根据不同的路径展示不同的内容
    switch (location.hash) {
      case '#/page1':
        routeView.innerHTML = 'page1';
        return;
      case '#/page2':
        routeView.innerHTML = 'page2';
        return;
      default:
        routeView.innerHTML = 'page1';
        return;
    }
  }
</script>

<ul>
  <li><a href="/page1">page1</a></li>
  <li><a href="/page2">page2</a></li>
</ul>
<div id="route-view"></div>

<script type="text/javascript">
  window.addEventListener('DOMContentLoaded', Load);
  window.addEventListener('popstate', PopChange);
  var routeView = null;
  function Load() {
    routeView = document.getElementById('route-view');
    // 默认执行一次 popstate 的回调函数，匹配一次页面组件
    PopChange();
    // 获取所有带 href 属性的 a 标签节点
    var aList = document.querySelectorAll('a[href]');
    // 遍历 a 标签节点数组，阻止默认事件，添加点击事件回调函数
    aList.forEach((aNode) =>
      aNode.addEventListener('click', function (e) {
        e.preventDefault(); //阻止a标签的默认事件
        var href = aNode.getAttribute('href');
        //  手动修改浏览器的地址栏
        history.pushState(null, '', href);
        // 通过 history.pushState 手动修改地址栏，
        // popstate 是监听不到地址栏的变化，所以此处需要手动执行回调函数 PopChange
        PopChange();
      })
    );
  }
  function PopChange() {
    console.log('location', location);
    switch (location.pathname) {
      case '/page1':
        routeView.innerHTML = 'page1';
        return;
      case '/page2':
        routeView.innerHTML = 'page2';
        return;
      default:
        routeView.innerHTML = 'page1';
        return;
    }
  }
</script>