
Nuxt 3 的 navigateTo 默认禁止跳转外部 URL,需显式设置 external: true 才能配合 open.target: '_blank' 实现新窗口打开第三方网站。
nuxt 3 的 `navigateto` 默认禁止跳转外部 url,需显式设置 `external: true` 才能配合 `open.target: '_blank'` 实现新窗口打开第三方网站。
在 Nuxt 3 中,navigateTo 是一个用于程序化导航的核心工具函数,但它对安全性做了严格限制:默认仅允许跳转至当前应用内的内部路由。当你尝试跳转到如 https://nuxt.com 这类外部域名时,即使指定了 open: { target: '_blank' },也不会生效——因为 open 选项仅在 external: true 显式启用后才被解析和执行。
✅ 正确用法如下:
<script setup lang="ts">
await navigateTo('https://nuxt.com', {
external: true, // ? 必须设置!否则 open 选项被忽略
open: {
target: '_blank',
rel: 'noopener noreferrer' // 推荐添加,提升安全性
}
})
</script>
⚠️ 注意事项:
- external: true 是强制前提,缺省时 navigateTo 会静默忽略外部 URL 或抛出警告(开发模式下可见);
- open 选项仅在 external: true 时生效,支持 target、rel、features 等标准 window.open() 参数;
- 若需用户可返回原页面,建议保留 rel="noopener noreferrer" 防止新页面通过 window.opener 访问源页面(避免安全风险与性能影响);
- 该行为不适用于服务端渲染(SSR)上下文——navigateTo 在服务端调用时会触发重定向(HTTP 302),而非浏览器窗口操作,因此务必确保逻辑运行在客户端(如 onMounted 或事件处理函数中)。
总结:Nuxt 3 将外部跳转视为潜在安全边界,要求开发者明确声明意图。记住口诀——“外链必设 external: true,新窗才认 open 配置”。











