vue2 (vue-router3
) 没有去 debug 源码,但是在公司的另外一个项目通过 history (window.history.replaceState) 去修改URL,vue-router3 是实时更新内部的 currentRoute
,所以在修改参数后,去跳转再回退,是最后一次的URL。
今天 debug vue-router4
发现,它的逻辑是记录当前页面最后一次通过 popstate
事件变化的 URL,也就是只处理 popstate
事件发生时的状态,通过 window.history 的 pushState 和 replaceState 去修改 URL 不会触发 popstate 事件,所以 vue-router4 没有感知是这个原因。
目前来看解决办法:
- 给当前的路由加上 state,在通过 window.history.replaceState 修改参数后,给当前的路由对象加上 state,返回再把 state 取出来然后回显状态。
- 不通过 window.history.replaceState 无刷新修改参数,而是通过 vue-router 修改参数,达到更新路由的目的。
- 既然 vue-router4 通过 popstate 事件处理逻辑,那手动触发
popstate
事件就可以了,在通过 window.history 修改参数后,手动dispatch popstate
事件window.dispatchEvent(new PopStateEvent("popstate"))
达到触发 router 的目的,这个和第二种类似。目前副作用未知,我用的这种方式。 - 手动 hack vue router,让它实时更新,这个我没做尝试。
参考: