vue通过打开新标签页打开某个路由

如果你想通过新标签页打开某个路由（如 `/scenario`），而不是在当前页面跳转，你可以使用以下方法：

✅ 方法：使用 `window.open()` 并拼接完整的 URL

由于 Vue Router 的 `router.push()` 是在当前窗口进行客户端路由跳转，无法直接在新标签页中打开。因此你需要手动构造 URL，并使用 `window.open()`。

示例代码：

const routePath = '/scenario'
const queryParams = { rsid: reservoirStore.rsId }

// 使用 router.resolve 获取完整路径
const fullPath = router.resolve({
  path: routePath,
  query: queryParams
}).href;

// 在新标签页中打开
window.open(fullPath, '_blank');

 📝 解释：

 `router.resolve()`：生成包含查询参数的完整 URL。
 `window.open(url, '_blank')`：在新标签页中打开该 URL。

💡 注意事项：

1. 跨域问题：确保新标签页的 URL 属于你的应用域名，否则可能因浏览器安全策略被拦截。
2. SSR/静态资源支持：如果使用了 SSR 或需要 SEO 支持，确保 `/scenario` 路由能独立渲染。
3. Pinia/Vuex 数据不可共享：新开标签页是独立的 Vue 实例，不能直接访问原页面的 Pinia/Vuex 状态

 ✅ 如果你想携带更多参数（例如对象）：

URL 只能传递字符串，可以将对象序列化为 JSON 字符串：

const fullPath = router.resolve({
  path: '/scenario',
  query: {
    rsid: reservoirStore.rsId,
    data: encodeURIComponent(JSON.stringify(bubbleData.value))
  }
}).href;

window.open(fullPath, '_blank');

然后在 `/scenario` 页面中读取并解析：

onMounted(() => {
  const dataStr = decodeURIComponent(route.query.data);
  const dataObj = JSON.parse(dataStr);
  console.log('接收到的数据:', dataObj);
});

🧩 总结

| 方式 | 是否推荐 | 场景 |
|------|----------|------|
| `router.push()` | ❌ | 仅限当前页跳转 |
| `window.open(router.resolve())` | ✅ 推荐 | 新标签页打开路由 |
| `window.open(location.origin + path)` | ✅ | 手动拼接 URL |