js 带参数跳转页面的方法

在 JavaScript 开发中，实现带参数跳转页面是一项常见的需求。它能够在不同页面之间传递关键信息，极大地增强了页面间的交互性和数据的连贯性。以下为您详细介绍几种常见的实现方法。

使用 window.location.href

这是最为简单直接的方式。通过修改 window.location.href 的值，我们可以实现页面跳转，并在 URL 中添加参数。例如：

function jumpWithParams() {
  const param1 = 'value1';
  const param2 = 'value2';
  const url = 'targetPage.html?param1=' + param1 + '&param2=' + param2;
  window.location.href = url;
}

在上述代码中，我们定义了两个参数 param1 和 param2，并将它们拼接在目标页面的 URL 后面。当调用 jumpWithParams 函数时，页面就会跳转到 targetPage.html，同时参数会携带在 URL 中。

使用 window.location.replace

window.location.replace 方法与 window.location.href 类似，但它会用新的页面替换当前页面，不会在浏览器历史记录中留下记录。示例代码如下：

function replacePageWithParams() {
  const param = 'exampleValue';
  const newUrl ='replacementPage.html?param=' + param;
  window.location.replace(newUrl);
}

这种方式适用于一些不需要用户通过浏览器返回按钮回到上一页的场景，比如引导用户完成特定流程后跳转到新页面。

使用 history.pushState

history.pushState 是 HTML5 新增的 API，它可以在不刷新页面的情况下改变浏览器的历史记录。通过传递一个包含参数的状态对象，我们也能实现带参数跳转。代码示例如下：

function pushStateWithParams() {
  const state = { param: 'data' };
  const title = 'New Page Title';
  const url = 'newPage.html';
  window.history.pushState(state, title, url);
  // 跳转到指定页面
  window.location.href = url;
}

在目标页面，可以通过 window.history.state 来获取传递的参数。这种方法在单页面应用（SPA）中非常有用，能提供更流畅的用户体验。

掌握这些 JavaScript 带参数跳转页面的方法，能让开发者根据具体的业务需求灵活选择合适的方式，优化页面间的数据传递和交互逻辑，为用户打造更优质的体验。