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

1. 使用history.replaceState

/**
 * 替换当前的 history state和url
 * @param {(searchParams:URLSearchParams)=>any} cb
 */
export const replaceUrlSearch = (cb) => {
  // 获取当前 URL
  const 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 更新 URL
  history.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)