Skip to main content

路由

History API​

在不刷新页面的情况下去掉URL中的参数​

要在不刷新页面的情况下去掉URL中的参数，可以使用HTML5的History API中的history.replaceState方法。这允许你修改浏览器地址栏中的URL，而不会触发页面刷新。

假设当前URL是http://example.com/page?param1=value1&param2=value2，我们要去掉所有的查询参数，使URL变成http://example.com/page。

  1. 移除所有查询参数

    // 获取当前的URL
    const url = new URL(window.location.href);

    // 移除所有查询参数
    url.search = '';

    // 使用 replaceState 更新 URL 而不刷新页面
    history.replaceState(null, '', url.toString());

  2. 保留部分参数

    如果你只想移除特定的参数而保留其他参数，可以这样做：

    // 获取当前的URL
    const url = new URL(window.location.href);

    // 移除特定的参数
    url.searchParams.delete('param1'); // 删除 param1

    // 使用 replaceState 更新 URL 而不刷新页面
    history.replaceState(null, '', url.toString());

  3. 不重新加载页面的情况下更新浏览器的 URL

    // 不重新加载页面的情况下更新浏览器的 URL
     const url = new URL(`${window.location}`);
     url.searchParams.set('orderNo', orderNoValue as string);
     const newUrl = url.toString();
     history.replaceState({ path: newUrl }, '', newUrl);