history.pushState 替换URL参数不刷新页面

添加或替换历史记录后，浏览器地址栏会变成你传的地址，而页面并不会重新载入或跳转
https://developer.mozilla.org/zh-CN/docs/Web/API/History/replaceState

history.pushState(state, title, url) 参数

1. state 状态对象
2. title标题，现在被忽略了
   1. 新页面的标题，但是所有浏览器目前都忽略这个值，可以填 null
3. URL地址，新的地址
   1. 新URL必须和当前URL在同一个域，否则，pushState()将丢出异常
   2. 如果它没有 url，会被设置为文档的当前URL

replaceState

https://developer.mozilla.org/zh-CN/docs/Web/API/History/replaceState

replaceUrl 替换 URL

只管替换 searchParams参数，hash有 URL维护

import { omitBy, isNil, keys } from 'lodash-es';
/**
 * 替换 URL的 query参数；改变网址，但不刷新页面，本质上网页还停留在原页面
 * @param query {object}
 *
 * history.replaceState(stateObj, title, url); 直接替换掉当前url，而不会在 history中留下记录
 * stateObj 状态对象：传给目标路由的信息,可为空
 * title 页面标题：目前所有浏览器都不支持,填空字符串即可
 * url 目标url：不会检查 url是否存在，且不能跨域。如不传该项，即给当前url添加data
 */
export function replaceUrl(query) {
  if (!keys(query).length) return;
  const url = new URL(window.location.href);
  const searchParams = { ...Object.fromEntries(url.searchParams), ...query };
  // 过滤 null和 undefined
  const filterQuery = omitBy(searchParams, isNil);
  keys(filterQuery).forEach(key => {
    url.searchParams.set(key, filterQuery[key]);
  });
  const newUrl = url.toString();
  history.replaceState({}, '', newUrl);
}

new URLSearchParams

替换 searchParams参数，还需要额外维护 hash参数

// 替换当前页面的 URL
function replaceUrl(query) {
  if (!Object.keys(query ?? []).length) return
  const {origin, pathname, search} = window.location;
  const params = new URLSearchParams(search);
  const newParams = {...Object.fromEntries(params), ...query};
  const newUrl = `${origin}${pathname}?${new URLSearchParams(newParams)}`;
  history.replaceState('', null, newUrl)
}

pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏会有变化
replaceState，把当前的页面的历史记录替换掉
pushState 或 replaceState 添加或替换历史记录后；浏览器地址栏会变成你传的地址，而页面并不会重新载入或跳转

需求场景

可以变更数据id，同时要同步到浏览器URL中，
url?id=3&name=lucy，要把 id替换为 25，但不要刷新页面

pushState参考
https://www.jianshu.com/p/808292c42cda