路由有哪些模式和区别 ​

hash ​

• 良好的兼容性

• hash 改变会触发hashchange事件

  js

  // 监听hash变化，点击浏览器的前进后退会触发
  window.addEventListener(
    "hashchange",
    function (event) {
      let newURL = event.newURL; // hash 改变后的新 url
      let oldURL = event.oldURL; // hash 改变前的旧 url
    },
    false
  );

  // 监听hash变化，点击浏览器的前进后退会触发
  window.addEventListener(
    "hashchange",
    function (event) {
      let newURL = event.newURL; // hash 改变后的新 url
      let oldURL = event.oldURL; // hash 改变前的旧 url
    },
    false
  );

• 可以通过location.hash获取和修改hash

history ​

• 兼容 HTML5 的 history api

• 常用的 api

  • history.pushState
  • history.replaceState

• 会触发popstate事件

abstract ​

• 支持 Node 服务端使用，可以用来模拟浏览器的路由栈