Element UI 官网菜单点击不触发路由变化监听问题?

Question

为什么 https://element.eleme.cn/#/zh-CN/component/checkbox
给 element ui 官网添加

window.addEventListener(
  "hashchange",
  function () {
    console.log("The hash has changed!");
  },
  false,
);

监听路由变化的函数，
点击左侧的菜单监听不到，
非要到控制台使用 window.location.hash = "#/zh-CN/component/cascader" 才能触发路由变化的函数，而点它自己的菜单却不能触发

希望点它自己的菜单也能触发路由变化的函数

Answer 1

因为router是通过history.pushState来改url的。

注意，pushState() 从未引起 hashchange 事件的触发，即使新 URL 与旧 URL 仅在 hash 上不同。 —— MDN

所以你想监听到url修改需要重写pushState然后派发事件:

var pushState = history.pushState;
history.pushState = (...args) => {
    window.dispatchEvent(new HashChangeEvent());
    pushState(...args)
}