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

时间:2025/7/11 18:41:42来源：https://blog.csdn.net/youhebuke225/article/details/141867752 浏览次数:0次

要在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() {// 获取当前URLconst 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替换当前页面，这不会在历史记录中添加新记录。