js刷新当前页面并添加路由参数

youhebuke225

于 2024-09-03 17:40:57 发布

阅读量637

点赞数 5

分类专栏： ESMAScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/youhebuke225/article/details/141867752

版权

ESMAScript 专栏收录该内容

45 篇文章 2 订阅

订阅专栏

要在JavaScript中刷新当前页面并添加参数到URL中，可以使用window.location.href或者window.location.replace方法来构造新的URL。具体方法如下：

1. 使用 `window.location.href`

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

// 添加参数
currentUrl.searchParams.set('paramName', 'paramValue');

// 重定向到新的URL
window.location.href = currentUrl.toString();

2. 使用 `window.location.replace`

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

// 添加参数
currentUrl.searchParams.set('paramName', 'paramValue');

// 替换当前页面
window.location.replace(currentUrl.toString());

示例代码

下面是一个完整的示例，展示如何在点击按钮时刷新当前页面并添加参数到URL中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page Refresh with Parameters Example</title>
</head>
<body>
    <button onclick="refreshPageWithParam()">刷新页面并添加参数</button>

    <script>
        function refreshPageWithParam() {
            // 获取当前URL
            const currentUrl = new URL(window.location.href);

            // 添加参数
            currentUrl.searchParams.set('refresh', 'true');  // 添加参数

            // 选择一种方法来刷新页面
            window.location.href = currentUrl.toString();  // 重定向到新的URL
            // 或者使用
            // window.location.replace(currentUrl.toString());  // 替换当前页面
        }
    </script>
</body>
</html>

在这个示例中，当用户点击“刷新页面并添加参数”按钮时，页面将会刷新，并且URL中会添加一个名为refresh的参数，其值为true。

解释

获取当前URL:
- 使用new URL(window.location.href)创建一个URL对象，这使得处理URL变得更加容易。
添加参数:
- 使用searchParams.set方法向URL对象中添加新的查询参数。如果参数已存在，则会覆盖原来的值。
重定向或替换当前页面:
- 使用window.location.href进行重定向，这会在浏览器的历史记录中添加一条新的记录。
- 使用window.location.replace替换当前页面，这不会在历史记录中添加新记录。