// 维护 UI 页面
let routerView = null;

// 路由变化时，根据路由渲染对应的 ui 页面
function onHashChange() {
  switch (window.location.hash) {
    case ‘‘:
    case ‘#/home‘:
      routerView.innerHTML = ‘Home‘;
      return ;
    case ‘#/about‘:
      routerView.innerHTML = ‘About‘;
      break;
    default:
      break;
  }
}

// 页面加载完不会触发 hashchange，这里主动触发一次 hashchange 事件。
window.addEventListener(‘DOMContentLoaded‘, () => {
  routerView = document.querySelector(‘#routeView‘);
  onHashChange();
})

// 监听路由变化。
window.addEventListener(‘hashchange‘, onHashChange);

// 维护 UI 页面。
let routerView = null;

// 路由变化时，根据路由渲染对应 UI 页面。
function onPopState() {
  switch (window.location.pathname) {
    case ‘/‘:
    case ‘/home‘:
      routerView.innerHTML = ‘Home‘;
      return ;
    case ‘/about‘:
      routerView.innerHTML = ‘About‘;
      break;
    default:
      break;
  }
}

// 页面加载完不会触发 onPopState, 这里主动触发一次 onPopState 事件。
window.addEventListener(‘DOMContentLoaded‘, () => {
  routerView = document.querySelector(‘#routeView‘);
  // 刷新页面。
  onPopState();

  // 拦截 <a> 标签点击事件默认行为， 点击时使用 pushState 修改 URL并更新手动 UI，从而实现点击链接更新 URL 和 UI 的效果。
  let links = document.querySelectorAll(‘a[href]‘);
  links.forEach(el => {
    el.addEventListener(‘click‘, e => {
      e.preventDefault();
      // 手动拦截
      window.history.pushState(null, ‘‘, el.getAttribute(‘href‘));
      onPopState();
    })
  })
})

// 监听路由变化。
window.addEventListener(‘popstate‘, onPopState);