window.history 路由劫持

vue项目中监听路由变化 并做自定义处理 代码记录：

定义 patchRouter 方法 ： 实现自定义事件并完成劫持工作

export const patchRouter = (event, ListerName) => {
  return function () {
    // 创建一个自定义事件
    const e = new Event(ListerName);
    // 让event来代替本函数执行
    event.apply(this, arguments);
    // 通过dispatchEvent来触发自定义事件
    window.dispatchEvent(e);
  };
};

定义 customEvent 方法 ：拦截目标事件完成后的自定义处理逻辑

const customEvent = () => {
  console.log('App.vue: 73 >>>>> ', '路由变更了');
};

定义一个方法 rewriteRouter 方法： 实现对 history.pushState 和 history.replaceState 的劫持

export const rewriteRouter = () => {
  window.history.pushState = patchRouter(window.history.pushState, 'custom_push');
  window.history.replaceState = patchRouter(window.history.replaceState, 'custom_replace');

  // 添加路由跳转事件监听
  window.addEventListener('custom_push', customEvent);
  window.addEventListener('custom_replace', customEvent);
  // 添加浏览器前进后退事件监听
  window.onpopstate = async function () {
    await customEvent()
  }
}

在项目入口 main 文件中执行 rewriteRouter

rewriteRouter()

当项目通过变更路由时

this.$router.push({ path: navItem.url });

控制台输出