介绍


Hash

<body>
  <ul>
    <li>
       <a href="#/home">home</a>
    </li>
    <li>
       <a href="#/list">list</a>
    </li>
    <li>
       <a href="#/detail">detail</a>
    </li>
 </ul>
</body>
<script>
window.onhashchange = function() {
    //  做页面切换渲染等
    console.log(location.href);
    console.log(location.hash);
}
</script>


History

popstate触发时机

<body>
  <ul>
    <li>
      <a href="/home">home</a>
    </li>
    <li>
      <a href="/list">list</a>
    </li>
    <li>
      <a href="/detail">detail</a>
    </li>
  </ul>
</body>
<script>
document.querySelectorAll('a').forEach(item => {
  item.onclick = function (e) {
      e.preventDefault();
      let link = item.getAttribute('href');
      window.history.pushState({link}, link, link);
   };
});
window.addEventListener('popstate', function (e) {
   console.log(e.state);
   console.log(location.href);
})
</script>


Abstract

abstract模式不依赖浏览器环境,没有使用hash和history等api去实现,而是VueRouter内部使用数组进行模拟了路由管理,在node环境,或者原生App环境下,都会默认使用abstract模式,VueRouter内部会根据所处的环境自行判断,默认使用hash模式,如果检测到没有浏览器API的时候,就会使用abstract模式。