window.location.href跳转前调用方法

### 如何在使用 `window.location.href` 跳转之前调用一个函数

当希望在页面跳转前执行特定逻辑时，可以先定义要执行的方法，在该方法内完成所需操作后再设置 `window.location.href` 进行页面跳转。下面是一个简单的例子来展示这一过程：

function executeBeforeRedirect() {
    console.log("正在准备数据...");
    
    // 假设这里有一些异步处理或其他业务逻辑
    
    let paramValue = "exampleParam";
    window.location.href = `/targetPage.html?param=${encodeURIComponent(paramValue)}`;
}

如果涉及到更复杂的场景，比如需要等待某些条件满足才能继续跳转，则可以通过回调函数或Promise机制确保顺序正确。

对于Vue应用中的特殊情况[^4]，考虑到可能存在浏览器兼容性问题或是框架本身的行为影响，建议测试不同方式以找到最适合当前环境的做法。例如，创建并触发 `<a>` 标签点击事件作为替代方案之一。

另外值得注意的是，在实际开发过程中应当注意用户体验，避免不必要的延迟加载时间过长给用户带来困扰。

相关问题

使用window.location.href跳转闪屏

使用`window.location.href`可以实现页面跳转。当你将一个新的URL赋值给`window.location.href`时，浏览器会加载该URL对应的页面，并在当前窗口中显示。

要实现闪屏效果，你可以在跳转之前先显示一个闪屏页面，然后再跳转到目标页面。以下是一个简单的示例代码：

// 显示闪屏页面
function showSplashScreen() {
  // 在页面中创建一个元素，用于显示闪屏内容
  var splashScreen = document.createElement('div');
  splashScreen.style.width = '100%';
  splashScreen.style.height = '100%';
  splashScreen.style.backgroundColor = 'white';
  splashScreen.style.display = 'flex';
  splashScreen.style.justifyContent = 'center';
  splashScreen.style.alignItems = 'center';

  // 在闪屏页面中添加一些内容，比如加载动画或者公司logo等
  splashScreen.innerHTML = '<h1>Loading...</h1>';

  // 将闪屏页面添加到body元素中
  document.body.appendChild(splashScreen);
}

// 跳转到目标页面
function redirectToTargetPage() {
  // 显示闪屏页面
  showSplashScreen();

  // 延时一段时间后跳转到目标页面
  setTimeout(function() {
    window.location.href = '目标页面的URL';
  }, 2000); // 延时2秒钟，可以根据需要调整时间
}

// 调用函数实现跳转闪屏效果
redirectToTargetPage();

在上面的代码中，`showSplashScreen`函数用于显示闪屏页面，你可以根据需要自定义闪屏页面的样式和内容。`redirectToTargetPage`函数用于跳转到目标页面，其中通过`setTimeout`函数设置了一个延时，延时结束后会将`window.location.href`设置为目标页面的URL，实现页面跳转。

window.location.href下载文件不跳转页面

可以通过创建一个隐藏的 `<a>` 标签，然后设置它的 `href` 属性为文件的 URL，再调用 `click()` 方法来实现下载文件而不跳转页面的效果。具体代码如下：

function downloadFile(url) {
  var link = document.createElement('a');
  link.href = url;
  link.download = true;
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

在调用 `downloadFile(url)` 函数时，只需要传入文件的 URL 即可实现下载文件而不跳转页面的效果。