需求:
如下圖所示,稅務月改變,修改對應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)