01.【手写vue-router】几个基础api

vue-router的本质：根据不同的hash值或者路径值将对应的组件渲染到<router-view>
因此实现vue-router的关键点在于如何监听hash或者路径的变化，并将组件渲染到指定位置。

1. 如何监听hash的变化

• 通过监听hashchange事件。当hash值变化时，触发该事件。

window.addEventListener('hashchange', () => {
  let currentHash = location.hash.slice(1)
  console.log(currentHash)
})

上面的方式基本上实现了需求，但是有一个问题，当页面一加载进来就有hash时，由于hash没有改变，所以也无法用上面的方式进行监听。这时如何获取hash值？

// 监听onload事件，假设内容挂载到一个id为html的div上
window.addEventListener('load', ()=>{
  let currentHash = location.hash.slice(1);
  document.querySelector('#html').innerHTML = currentHash;
 })

2. 如何监听路径

<a onclick="go('/home')">首页</a>
<a onclick="go('/about')">关于</a>
<div id="html"></div>
<script>
  function go(path) {
    // console.log(path);
    // 添加到路径
    history.pushState(null, null, path);
    document.querySelector('#html').innerHTML = path;
  }
// 监听前进或后退按钮的点击
  window.addEventListener('popstate', () => {
    console.log('点击了前进或者后退', location.pathname);
    document.querySelector('#html').innerHTML = location.pathname;
  })
</script>