Nuxt 3中navigateTo设置target="_blank"无法打开新窗口求助

问题原因 #

你直接在<script setup>顶层调用navigateTo的方式，属于页面加载时自动执行的代码，并非用户主动触发的交互操作（比如点击按钮）。出于安全策略，浏览器会拦截这种非用户触发的弹窗请求，导致代码无法生效。另外，Nuxt 3早期版本（如3.0.0）的navigateTo的open选项在非交互场景下的兼容性也可能存在问题。

解决方案 #

方案1：在用户交互回调中使用navigateTo

将跳转逻辑绑定到用户触发的事件（比如按钮点击）中，确保在浏览器允许的交互上下文里执行：

<template>
  <button @click="openExternalSite">打开Nuxt官网</button>
</template>

<script setup lang="ts">
const openExternalSite = async () => {
  await navigateTo('https://nuxt.com', {
    open: {
      target: '_blank'
    }
  })
}
</script>

方案2：直接使用window.open（更稳定的外部链接跳转方式）

对于第三方外部链接，直接使用浏览器原生的window.open在用户交互中调用，兼容性和稳定性更好：

<template>
  <button @click="openExternalSite">打开Nuxt官网</button>
</template>

<script setup lang="ts">
const openExternalSite = () => {
  window.open('https://nuxt.com', '_blank')
}
</script>

注意事项 #

• 无论使用哪种方式，都必须确保跳转逻辑在用户主动触发的事件回调中执行，否则浏览器会拦截弹窗。
• 如果你坚持使用navigateTo，建议将Nuxt升级到较新的稳定版本，修复早期版本可能存在的bug。

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