vue-router如何监听地址栏的变化并作出响应的？

Question

有人说history模式用的是onpopstate来监听
但是MDN里写了：

调用history.pushState()或者history.replaceState()不会触发popstate事件.popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法).

histrory是如何监听的？

还有hash模式呢？

Answer 1

如果使用户使用 router.push() 方法改变路由，则不会监听事件，而是在调用 window.history.pushState() 之前，手动刷新组件，模拟了页面的跳转。上面那位老兄贴出的源码没错，不过监听的是用户手动点击前进和后退触发的事件，然后重渲染组件。

答案来源：https://www.jianshu.com/p/557...

Answer 2

在导航守卫里处理，to 和 from 对应上个路由对象和即将进入的路由对象：

router.beforeEach((to, from, next) => {
  // ...
})

Answer 3

histrory 模式底层用的是HTML5 History API，监听 popstate 事件。

hash 模式就是监听地址栏#号后面的变化，用的是 hashchange 事件