在 Vue 中实现跨标签页的数据共享，可通过以下方案实现：

---

1. localStorage + storage 事件

利用浏览器原生 API 实现数据同步：

// 标签页 A：存储数据
localStorage.setItem('sharedData', JSON.stringify({ key: 'value' }));

// 标签页 B：监听数据变化
window.addEventListener('storage', (event) => {
  if (event.key === 'sharedData') {
    const newData = JSON.parse(event.newValue);
    console.log('收到新数据:', newData);
  }
});

注意：

• 同源策略下生效
• 需手动处理数据类型（如 JSON 转换）
• 无法直接共享响应式数据

---

2. BroadcastChannel API

现代浏览器支持的轻量级通信方案：

// 所有标签页创建同一频道
const channel = new BroadcastChannel('vue_channel');

// 发送数据
channel.postMessage({ type: 'update', data: 'payload' });

// 接收数据
channel.onmessage = (event) => {
  if (event.data.type === 'update') {
    console.log('跨页数据:', event.data.data);
  }
};

优势：

• 无需后端支持
• 精确控制通信逻辑

---

3. WebSocket 服务

适用于实时性要求高的场景：

// 连接后端 WebSocket 服务
const socket = new WebSocket('ws://your-server');

// 发送数据
socket.send(JSON.stringify({ page: 'tab1', data: 'content' }));

// 监听数据
socket.addEventListener('message', (event) => {
  const msg = JSON.parse(event.data);
  // 更新 Vue 组件状态
});

适用场景：

• 多用户协作编辑
• 实时数据仪表盘

---

4. 共享状态管理（Vuex + 持久化）

结合 vuex-persistedstate 插件同步存储：

import createPersistedState from 'vuex-persistedstate';

const store = new Vuex.Store({
  state: { sharedValue: null },
  plugins: [createPersistedState()] // 自动同步到 localStorage
});

特性：

• 数据变更自动触发跨页更新
• 保持 Vue 响应式特性
• 需配合 storage 事件监听使用

---

⚠️ 注意事项

1. 安全敏感数据：避免用 localStorage 存储令牌等敏感信息
2. 兼容性：BroadcastChannel 不支持 IE 及旧版 Safari
3. 性能优化：高频更新数据时建议使用防抖/节流
4. 数据格式：优先使用 JSON 序列化复杂对象

可根据具体场景选择合适方案，简易项目推荐方案 1 或 4，高实时性需求选择方案 3。