Vue应用中异步API调用完成后如何正常在新标签页打开窗口

核心原因 #

浏览器弹窗拦截规则要求：只有用户主动交互事件（点击、触摸等）的同步执行上下文内调用的window.open才会被放行，加入await异步等待逻辑后，window.open的执行上下文脱离了用户交互触发栈，会被判定为恶意弹窗拦截。 #

可行方案 #

方案一：预开空白标签页，接口返回后填充地址（最通用稳定） #

用户点击时同步打开空白标签页拿到页面对象引用，这一步处于用户交互的同步上下文，不会被拦截。等异步接口返回后再为该标签页替换实际跳转地址，接口报错时可直接关闭空白页避免留下无用页面。
代码示例：

const someFunction = async () => {
  // 同步打开空白标签页，获得页面对象引用
  const newTab = window.open('', '_blank')
  // 可选优化：空白页先展示加载提示，避免用户误以为页面卡住
  newTab.document.write(`
    <div style="display: flex;align-items: center;justify-content: center;height: 100vh;font-size: 16px;color: #333;">
      页面加载中，请稍候...
    </div>
  `)
  try {
    const value = await api.someCallToApi()
    // 接口请求成功，替换为实际跳转地址
    newTab.location.href = 'https://example.com'
    newTab.focus()
  } catch (err) {
    // 接口请求失败，关闭空白标签页
    newTab.close()
    // 此处可添加自定义错误提示逻辑
    console.error('请求失败，无法跳转：', err)
  }
}

优缺点：兼容性拉满，所有现代浏览器都支持，无额外用户操作步骤；接口请求较慢时会先显示空白/加载提示，适合对操作效率要求高的场景。

方案二：接口返回后增加用户确认步骤 #

异步接口返回后弹出确认提示框，用户点击确认按钮的同步上下文内调用window.open，此时又符合浏览器的放行规则，不会被拦截。
代码示例（以Element Plus的ElMessageBox为例，其他UI库逻辑完全一致）：

import { ElMessageBox } from 'element-plus'

const someFunction = async () => {
  try {
    const value = await api.someCallToApi()
    // 接口返回后弹出确认提示，用户点击确认的同步上下文内打开新标签
    await ElMessageBox.confirm('即将跳转至外部页面，是否继续？', '操作提示')
    window.open('https://example.com', '_blank').focus()
  } catch (err) {
    // 捕获接口报错或用户取消确认的异常
    console.error('跳转取消或请求失败：', err)
  }
}

优缺点：无空白页问题，还能给用户跳转前的二次确认提示，适合跳转外部站点的场景；多了一步用户确认操作，适合对操作路径要求不高的业务。 #

注意事项 #

• 不要尝试通过伪造用户点击事件的方式触发异步window.open，现代浏览器均可识别该类操作，依然会拦截弹窗
• 两种方案均适配Vue2/Vue3以及其他前端框架，无框架绑定逻辑
• 如果跳转地址为同域地址，也可以用路由拼接参数的方式替换location.href赋值，逻辑完全一致

内容的提问来源于stack exchange，提问作者Rogier