Flutter Web中如何点击按钮在新标签页打开页面？

1. 原生JS场景：打开当前应用内路由/指定内容 #

如果是传统多页应用或需打开当前页面的路由分支、动态内容，可通过以下两种方式实现：

方式一：创建隐藏a标签触发跳转 #

document.getElementById('myBtn').addEventListener('click', function() {
  // 创建临时a标签
  const link = document.createElement('a');
  // 设置应用内目标路径（如路由地址）
  link.href = '/user/profile';
  // 指定新标签页打开
  link.target = '_blank';
  // 触发点击事件
  link.click();
  // 移除临时标签
  link.remove();
});

方式二：window.open加载页面+跨标签传参 #

若需打开动态生成的内容，可通过URL参数或postMessage传递数据，新标签页接收后渲染对应内容：

document.getElementById('myBtn').addEventListener('click', function() {
  // 打开当前页面并携带标识参数
  const newTab = window.open(window.location.origin + '/?view=detail');
  // 向新标签页传递复杂数据
  newTab.postMessage({ type: 'loadDetail', data: { id: 123 } }, window.location.origin);
});

// 新标签页监听消息并渲染
window.addEventListener('message', function(e) {
  if (e.data.type === 'loadDetail') {
    renderDetail(e.data.data.id);
  }
});

2. React场景：打开内部路由到新标签页 #

配合React Router时，无法直接用Link组件实现新标签跳转，可通过以下方式：

方式一：用generatePath生成路由路径 #

import { generatePath } from 'react-router-dom';

function MyButton() {
  const handleClick = () => {
    const path = generatePath('/user/:id', { id: 456 });
    const link = document.createElement('a');
    link.href = path;
    link.target = '_blank';
    link.click();
    link.remove();
  };

  return <button onClick={handleClick}>打开用户详情</button>;
}

方式二：sessionStorage临时存复杂数据 #

function MyButton() {
  const handleClick = () => {
    const userData = { id: 456, name: 'John' };
    // 临时存储数据
    sessionStorage.setItem('tempUser', JSON.stringify(userData));
    // 打开路由页面
    window.open('/user/detail', '_blank');
  };

  return <button onClick={handleClick}>打开用户详情</button>;
}

// 在UserDetail组件中读取数据
useEffect(() => {
  const tempUser = JSON.parse(sessionStorage.getItem('tempUser'));
  if (tempUser) {
    setUser(tempUser);
    sessionStorage.removeItem('tempUser');
  }
}, []);

3. Vue场景：打开内部路由到新标签页 #

配合Vue Router时，可通过路由地址解析实现：

方式一：用$router.resolve生成路径 #

<template>
  <button @click="openNewTab">打开商品详情</button>
</template>

<script>
export default {
  methods: {
    openNewTab() {
      const { href } = this.$router.resolve({
        name: 'ProductDetail',
        params: { id: 789 }
      });
      window.open(href, '_blank');
    }
  }
}
</script>

核心思路总结 #

• 核心是通过模拟a标签跳转或window.open实现，关键设置target="_blank"（a标签）或window.open第二个参数为_blank
• 传递数据可选择URL参数、sessionStorage、postMessage等方式
• 框架场景下，利用路由工具生成正确的内部路径即可完成跳转

内容的提问来源于stack exchange，提问作者Muhammad Umair Saqib