前端路由

通过一定的机制，监听用户的行为动作，页面从而做出对应的变化。

hash模式

hash模式是不需要服务端配合的。

改变路由

通过window.location.href或window.location.replace改变路由。

监听路由改变 hashchange

在hash改变的时候，触发hashchange事件。通过监听hashchange事件，可以在监听事件的回调函数中执行展示和隐藏不同UI显示的功能，从而实现前端路由。

window.addEventListener('hashchange', function(e) {
  /* 监听改变 */
});

history模式

history模式下，如果跳转路由后再次刷新会得到404的错误，这个错误是浏览器会把整个地址当成一个可访问的静态资源路径进行访问，然后服务端并没有这个文件。所以一般情况下，我们都需要配置下nginx的try_files参数，当我们访问的路径资源不存在的时候，默认指向静态资源index.html。

改变路由

通过history.pushState或history.replaceState改变路由。

history.pushState(state, title, path);
history.replaceState(state, title, path);

监听路由改变 popstate

popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮或者调用history.back()、history.forward()、history.go()方法。通过监听popstate事件，可以在监听事件的回调函数中执行展示和隐藏不同UI显示的功能，从而实现前端路由。用history.pushState()或者history.replaceState()改变路由不会触发popstate事件。

window.addEventListener('popstate', function(e) {
  /* 监听改变 */
});

history.pushState()或者history.replaceState()不会触发popstate事件

• 可以通过 dispatchEvent 改写这两个方法实现对这两个方法的监听。

const _wr = function(type) {
  let orig = history[type];
  return function() {
    let rv = orig.apply(this, arguments);
    let e = new Event(type);
    e.arguments = arguments;
    window.dispatchEvent(e);
    return rv;
  }
}

history.pushState = _wr('pushState');
history.replaceState = _wr('replaceState');

window.addEventListener('pushState', function(e) {
  /* 监听改变 */
});
window.addEventListener('replaceState', function(e) {
  /* 监听改变 */
});

• 调用history.pushState()或者history.replaceState()时手动触发页面内容更新。
  1. 首先生成一个最新的location对象。
  2. 然后通过window.history.pushState或者window.history.replaceState方法改变浏览器当前路由。
  3. 最后手动触发组件更新，并传递当前最新的location对象。