vue前端开发两个窗口之间的互相通信

最新推荐文章于 2025-03-10 18:23:24 发布

原创最新推荐文章于 2025-03-10 18:23:24 发布 · 678 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

一个页面window.open了一个新窗口，要关闭新窗口的同时进行老窗口的路由跳转。

方法1：网上查找的postMessagr方法

在新窗口进行路由跳转判断并关闭新窗口的浏览器页面：

在老的窗口进行消息接收监听进行路由跳转

这个方法本地测试没问题后测试环境无法使用解决无果后换了方法二用localStorage存储信息发现依然不可取 ------可能是代码哪里不到位或者版本问题

方法三:在新窗口构建老窗口的url跳转

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

橘子味小白菜

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue跨标签页通信（或跨窗口）详细教程

bollat的博客

10-12

2344

跨标签页（或跨窗口）的通信通常涉及到两个或多个浏览器标签页之间的信息共享。由于每个标签页或窗口都是独立的 JavaScript 执行环境，它们不能直接通过 Vue 或其他 JavaScript 库来直接相互通信。

【前端学习指南】第二站 Vue 工程化开发

范同学的学习历程

11-11

1275

Vue CLI 是 Vue 官方提供的一个全局命令工具。可以帮助我们快速创建一个开发用的 Vue 项目的标准框架。其中内置集成了 Webpack。使用 Vue CLI 的好处就在于不用再对 Webpack 进行配置，拿来安装即可使用，快速创建一个可以使用的 Vue 工程，直接就能上手开发项目。组件化是指将一个页面拆分成一个个组件，每个组件有自己独立的结构、样式、行为。这样做的好处就在于更好的维护，利于代码复用，进而提升开发效率。

参与评论您还未登录，请先登录后发表或查看评论

两个窗口如何实现通信

CRMEB小程序商城的博客

11-14

916

对于window.open()一般可以设置三个参数，这里就简单介绍了，如果需要更深入的了解就请自己查找资料第一个参数，打开新窗口的url地址第二个参数，给新窗口的名字(name)，并不是新窗口在窗口显示的title，在窗口下，通过window.name的方式拿到这里也可以设置_self(在旧窗口打开新窗口)，_blank(重新打开新窗口，默认就是该模式)第三个参数，设置打开新窗口的宽高等。

vue3关于两个不同页面（窗口）之间怎么传值通信、调用方法的问题解决

weixin_42498594的博客

03-17

5645

如果只是单纯的两个页面通信，就不需要写在app.vue里。

多个浏览器窗口之间通信

qq_38648382的博客

03-27

1254

多个浏览器窗口间通信，浏览器通信简单实现，双屏浏览器通信，多屏浏览器通信

vue 跨页面双向通信

weixin_45076451的博客

11-11

5778

vue 跨页面双向通信一、同源通信 1、localStorage 添加时间监听 window.addEventListener('storage', function (e) {}); 改变 localStorage 值，触发 storage 事件 window.localStorage.setItem('params', JSON.stringify(object)); 2、通过跳转 url 传参 // 跳转路径带参数 3、通过 BroadCast channel 广播实现通信 // 创建一个广播

Vue前端技术知识整理

shuux666的博客

03-09

6458

VueJS 第一步，安装node.js 安装包下载地址：https://nodejs.org/en/ 安装包下载安装完成后，在命令行使用 node -v 查看node版本，判断是否安装成功。第二步，安装vue脚手架安装淘宝镜像： npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack： npm install webpack@3.8.1 -g webpack -v 查看版本号安装vue-cli脚手架工具

electron + vue3 + vite 渲染进程与渲染进程之间的消息端口通信

最新发布

狼性书生

03-10

1389

渲染进程与渲染进程之间的通信有两种： - 通过主进程进行消息转发（通过组合主进程与渲染进程之间的单向、双向通信可以实现，可以自己动手尝试，该篇不讲解） - 通过消息端口进行直接通信该篇主要用示例讲解下单项目内多个窗口的渲染进程之间相互通信的流程（也就是通过消息端口进行通知）

Vue跨标签页数据通信

qq_39691676的博客

06-20

756

BroadCast Channel(广播频道): 需要保证每个标签页使用同一个频道,比如下方的’sync-update’在同一浏览器项目地址处于不同的标签页中,建立两个页面间的数据通信，即：B页面新增/修改数据;A页面表格自动更新数据。LocalStorage Window.onstorage监听。BroadCast Channel (广播频道)Shared Worker 定时器轮询。IndexedDB 定时器轮询。cookie 定时器轮询。

vue的页面通讯

weixin_50386489的博客

01-13

215

uni.$emit()，uni.$on()，uni.$once()，uni.$off

Vue进阶（九十二）：应用 postMessage 实现窗口通信_vue使用postmessage

2401_84411323的博客

05-09

1148

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue：embed结合ElementUI中dialog实现PDF文件预览(2)

2401_84433807的博客

04-29

597

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

vue兄弟组件（页面）之间通信的方法总结

weixin_74308571的博客

04-09

523

作为全局状态管理方案，Vuex也可以在非父子组件之间传递数据。你可以在Vuex store中存储数据，并在需要的组件中获取和修改这些数据。：如果你的组件是通过Vue Router路由跳转的，你可以使用路由参数来传递数据。Vue实例作为事件总线，并在需要传递数据的组件中触发和监听事件。

vue 跨标签页的数据共享(即跨标签页通信)

UserGuan的博客

11-07

5587

指在同一个浏览器窗口中的多个标签页之间进行数据交流和信息传递的过程。通常情况下，每个标签页都是一个独立的浏览器上下文，它们之间是相互隔离的，无法直接访问对方的数据或进行通信。跨标签页通信的目的是允许这些相互隔离的标签页之间进行信息共享和交互。通过跨标签页通信，可以实现数据的共享、状态的同步、消息的传递等功能。例如：在一个标签页中进行了某个操作，希望其他标签页能够及时获得相关的变化和通知，就需要使用跨标签页通信机制来实现这种交互。

两个窗口之间怎么传值通信 Vue

做一个有知识的流氓

09-07

2176

B页面通过点击按钮给A页面传值例如我的gif。

vue中跨窗口通信：新窗口调用父窗口方法

qq_42931285的博客

09-16

3610

vue中跨窗口通信：新窗口调用父窗口方法

vue组件/页面间通信(vue eventbus)

wilL-my的博客

07-29

1345

首先，在main.js里面全局注册一个eventbus的方法。 Vue.prototype.$EventBus = new Vue() 分别在页面或组件中注册一个自定义事件和监听事件 this.$EventBus.$emit(自定义事件名, 数据); this.$EventBus.$emit("send","hello") --------------------------------------- this.$EventBus.$on("send",(val)=>{ co

vuex 页面间通讯

qq_41624731的博客

05-29

282

根目录下新建一个文件夹store 里面新建index.js 和tab.js文件 index.js import Vue from 'vue' import Vuex from 'vuex' import tab from './tab' Vue.use(Vuex) export default new Vuex.Store({ modules:{ tab } }) tab.js页面 export default { state:{

Vue3.x使用vuex进行页面间通信

比起未来可期，我更喜欢如约而至

08-29

1164

Vue3.x使用vuex进行页面间通信

两个用户在同一台电脑上登陆vue前端

02-27

### 实现同一台电脑多个用户登录 Vue 前端应用程序为了实现在同一台计算机上的不同浏览器标签页中允许多个用户的登录，主要挑战在于处理 token 的存储和管理机制。当使用单页面应用(SPA)技术如 Vue.js 开发的应用程序时，默认情况下，浏览器中的全局状态（例如 localStorage 或 sessionStorage 中保存的 token）会被所有同源策略下的标签共享。一种解决方案是在创建新的浏览上下文来隔离这些 session 数据。具体方法如下： #### 使用无痕模式窗口打开新会话鼓励用户利用浏览器提供的隐私浏览功能（也称为隐身模式或 InPrivate 浏览），这将为每个新开的无痕窗口提供独立的 cookie 和缓存空间，从而允许不同的用户同时登录而不会相互干扰[^2]。另一种更灵活的方法涉及修改前端代码以支持多账户并行工作： #### 修改 Token 存储逻辑改变默认的 token 存储位置，不再依赖于整个域名范围内的 storage 选项（localStorage/sessionStorage）。而是采用更加细粒度的方式，比如基于 URL 参数传递 token 或者针对特定路径设置 cookies，并确保 API 请求携带正确的认证信息。对于基于 Vue 应用来说，可以通过调整 Vuex store 来维护多个用户的 state 对象，在每次发起 HTTP 请求之前动态附加相应的 Authorization header: ```javascript // main/src/store/index.ts import { createStore } from 'vuex'; export default createStore({ modules: { user1: /* 用户1的状态 */, user2: /* 用户2的状态 */ } }); ``` 然后可以在 axios 拦截器里根据不同情况选择合适的 token 进行发送: ```javascript // main/src/plugins/axios.js import axios from 'axios'; const instance = axios.create(); instance.interceptors.request.use((config) => { const currentTabId = getCurrentTabId(); // 获取当前 tab ID 函数待实现 config.headers.Authorization = `Bearer ${store.state[currentTabId].token}`; return config; }); function getCurrentTabId() { // 返回唯一标识符用于区分各个 Tab 页面, 可能是通过 hash、query string 等方式获取 } ``` 这种方法不仅解决了 token 被覆盖的问题，还提高了用户体验的安全性和便利性[^4]。另外值得注意的是，如果项目采用了微前端架构，则需要特别关注子应用之间的通信以及各自的身份验证流程设计，确保它们能够正确地管理和交换身份令牌[^3]。