【vue】頁面不刷新情況下修改url參數(shù)

需求：

如下圖所示，稅務(wù)月改變，修改對應(yīng)url中的參數(shù)，為了用戶體驗，不能刷新


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

解決辦法：

使用history的pushState或者replaceState

window.history.pushState(data, title, targetURL);
@狀態(tài)對象：傳給目標(biāo)路由的信息,可為空
@頁面標(biāo)題：目前所有瀏覽器都不支持,填空字符串即可
@可選url：目標(biāo)url，不會檢查url是否存在，且不能跨域。如不傳該項,即給當(dāng)前url添加data

window.history.replaceState(data, title, targetURL);
@類似于pushState,但是會直接替換掉當(dāng)前url,而不會在history中留下記錄

詳細(xì)代碼

const newUrl = this.$route.path + `?benefitsMonth=${this.benefitsMonth}&typeId=${this.typeId}`
window.history.replaceState('', '', newUrl)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容