【vue】页面不刷新情况下修改url参数

需求：

如下图所示，税务月改变，修改对应url中的参数，为了用户体验，不能刷新

截屏2020-08-31下午6.25.54.png

解决办法：

使用history的pushState或者replaceState

window.history.pushState(data, title, targetURL);
@状态对象：传给目标路由的信息,可为空
@页面标题：目前所有浏览器都不支持,填空字符串即可
@可选url：目标url，不会检查url是否存在，且不能跨域。如不传该项,即给当前url添加data

window.history.replaceState(data, title, targetURL);
@类似于pushState,但是会直接替换掉当前url,而不会在history中留下记录

详细代码

const newUrl = this.$route.path + `?benefitsMonth=${this.benefitsMonth}&typeId=${this.typeId}`
window.history.replaceState('', '', newUrl)