replaceState和vue的router.replace删除query参数的区别

1. 使用history.replaceState

/*** 替换当前的 history state和url* @param {(searchParams:URLSearchParams)=>any} cb*/
export const replaceUrlSearch = (cb) => {// 获取当前 URLconst url = new URL(window.location.href)// 获取 URL 的查询参数const searchParams = new URLSearchParams(url.search)// 删除 code 参数// searchParams.delete('code')typeof cb == 'function' && cb(searchParams)// 更新 URL 的查询参数url.search = searchParams.toString()// 使用 history.replaceState 更新 URLhistory.replaceState({}, document.title, url.toString())
}

然后通过该方法删除某个query参数

// 该方法不起作用，vue router的route.query.isEnd还是有包含该参数replaceUrlSearch((searchParams) => {searchParams.delete('clockPointId')searchParams.delete('isEnd')})

2. 使用router.replace

router.replace({ path: currentRoute.value.path, query: {} })

在vue项目中，如果要替换掉query参数，可以使用router.replace来替换，通过route.query.xxx获取的参数就会有变化，如果是通过 history.replaceState 的话，就要通过 location.href.search来获取或者 new UrlSearchParams(location.href.search)