vue项目进入页面移除了地址栏参数，但切页面之后又取到了移除的参数

场景：在进入页面的时候需要获取地址栏是否有指定参数，来做不同的动作。
比如进入一个页面，页面需判断URL中是否有一个参数target=delete来自动唤起删除的动作。为防止刷新也会再次唤起就需要在执行唤起动作的时候就把参数给移除掉并把地址栏给替换为删除后的

实现方案如下：

// 清除 url 参数
window.history.replaceState(null, '', removeUrlParam(location.href, ['target']))

只要参数没有了，刷新页面的时候就不会再次唤起删除动作了，到此功能已实现。

问题点：

然而测试过程中发现刷新虽然好了，但是切换页面在切回来还是可以唤起，debugger发现$route.query.target还是可以取到值?

思考？

1. 为什么明明移除并改动了地址栏显示链接，但用$route.query.target还可以获取到值？
   原因： vue中使用history.replaceState 更改url vue router 是无法感知的。
   解决方案： 利用vue中的replace来做替换。

// 清除 url 中的key标记，防止切换之后或者刷新之后还是会执行此方法
this.$router.replace({ path: removeUrlParam(this.$route.fullPath, ['target']) })

---

至此问题已经解决了，为了防止其他页面也有类似的问题，于是排查了全局使用replaceState的地方，排查到有几处相似的问题，但是在修复过程中又发现部分页面在切换的时候又没有问题。

排查

继续排查发现是因为，没有问题的页面切换是以vue router的方式跳转的，在此过程是会改变router对象，自然就没问题；
而有问题的页面切换是以动态组件的形式，然后用的window.history.replaceState来改变的地址信息，所以在这个过程中并没有动到vue router所以导致了问题的发生。

小结

归根结底还是因为vue中使用history.replaceState 更改url vue router 是无法感知的。还需特别留意！！！