vue 路由实现原理

historys
  a.html
  b.html
  
hash
  c.html
  d.html

 // history
    //注册路由
    document.querySelectorAll('.api').forEach(item => {
      item.addEventListener('click', e => {
        e.preventDefault();
        let link = item.textContent;
        window.history.pushState({
          name: 'api'
        }, link, link);
      })
    })
    //监听路由
    window.addEventListener('popstate', e => {
      console.log({
        location: location.href,
        state: e.state
      })
    })

    // hash
    //注册路由
    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)