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

最新推荐文章于 2025-05-08 18:25:39 发布
最新推荐文章于 2025-05-08 18:25:39 发布
阅读量623 收藏
点赞数 3
CC 4.0 BY-SA版权
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Judith_p/article/details/139979917

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

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

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

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

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

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

vue跨标签页通信（或跨窗口）详细教程
bollat的博客
10-12 2169
跨标签页（或跨窗口）的通信通常涉及到两个或多个浏览器标签页之间的信息共享。由于每个标签页或窗口都是独立的 JavaScript 执行环境，它们不能直接通过 Vue 或其他 JavaScript 库来直接相互通信。
【前端学习指南】第二站 Vue 工程化开发
范同学的学习历程
11-11 1188
Vue CLI 是 Vue 官方提供的一个全局命令工具。可以帮助我们快速创建一个开发用的 Vue 项目的标准框架。其中内置集成了 Webpack。使用 Vue CLI 的好处就在于不用再对 Webpack 进行配置，拿来安装即可使用，快速创建一个可以使用的 Vue 工程，直接就能上手开发项目。组件化是指将一个页面拆分成一个个组件，每个组件有自己独立的结构、样式、行为。这样做的好处就在于更好的维护，利于代码复用，进而提升开发效率。
两个窗口如何实现通信
CRMEB小程序商城的博客
11-14 845
对于window.open()一般可以设置三个参数，这里就简单介绍了，如果需要更深入的了解就请自己查找资料第一个参数，打开新窗口的url地址第二个参数，给新窗口的名字(name)，并不是新窗口在窗口显示的title，在窗口下，通过window.name的方式拿到这里也可以设置_self(在旧窗口打开新窗口)，_blank(重新打开新窗口，默认就是该模式)第三个参数，设置打开新窗口的宽高等。
Vue实现浏览器多页面之间的通信
最新发布
weixin_44522680的博客
05-08 310
Vue实现多页面通信(同源)
vue3关于两个不同页面（窗口）之间怎么传值通信、调用方法的问题解决
weixin_42498594的博客
03-17 5020
如果只是单纯的两个页面通信，就不需要写在app.vue里。
多个浏览器窗口之间通信
qq_38648382的博客
03-27 1188
多个浏览器窗口间通信，浏览器通信简单实现，双屏浏览器通信，多屏浏览器通信
vue 跨页面双向通信
weixin_45076451的博客
11-11 5701
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 6357
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脚手架工具
温州上市企业VUE前端面试题
02-11
这可以通过Vue的事件总线（Event Bus）或者Vuex状态管理来实现，确保两个组件间的数据同步。 4. **回车栏位跳转** 实现此功能，需要监听键盘事件（keydown），特别是回车键（key code为13）。当用户在特定栏位按下...
单点登录跨域iframe互相通信方案.zip
10-12
跨域通信是Web开发中的一个重要挑战，特别是在涉及到iframe时。由于浏览器的同源策略，不同源的网页之间无法直接交换信息，这限制了iframe在不同域之间共享数据的能力。但是，在单点登录场景下，有时我们需要在主...
vue的页面通讯
weixin_50386489的博客
01-13 196
uni.$emit()，uni.$on()，uni.$once()，uni.$off
Vue 页面状态保持页面间数据传输的一种方法(推荐)
10-17
vue router给我们提供了两种页面间传递参数的方式,一种是动态路由匹配，一种是编程式导航，接下来通过本文给大家介绍Vue 页面状态保持页面间数据传输的一种方法,需要的朋友可以参考下
支持一对多发送通知消息主要解决reactreactnativevueh5夸组件页面之间的通信
08-12
A react、vue、react native module to post and observer notification, it works on iOS and Android、H5. (支持一对多发送通知消息、主要解决react、react-native、vue、h5夸组件页面之间的通信)
Vue进阶（九十二）：应用 postMessage 实现窗口通信_vue使用postmessage
2401_84411323的博客
05-09 1033
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vue兄弟组件（页面）之间通信的方法总结
weixin_74308571的博客
04-09 503
作为全局状态管理方案，Vuex也可以在非父子组件之间传递数据。你可以在Vuex store中存储数据，并在需要的组件中获取和修改这些数据。：如果你的组件是通过Vue Router路由跳转的，你可以使用路由参数来传递数据。Vue实例作为事件总线，并在需要传递数据的组件中触发和监听事件。
vue 跨标签页的数据共享(即跨标签页通信)
UserGuan的博客
11-07 4995
指在同一个浏览器窗口中的多个标签页之间进行数据交流和信息传递的过程。通常情况下，每个标签页都是一个独立的浏览器上下文，它们之间是相互隔离的，无法直接访问对方的数据或进行通信。跨标签页通信的目的是允许这些相互隔离的标签页之间进行信息共享和交互。通过跨标签页通信，可以实现数据的共享、状态的同步、消息的传递等功能。例如：在一个标签页中进行了某个操作，希望其他标签页能够及时获得相关的变化和通知，就需要使用跨标签页通信机制来实现这种交互。
两个窗口之间怎么传值 通信 Vue
做一个有知识的流氓
09-07 2161
B页面 通过点击按钮给A页面传值 例如我的gif。
vue中跨窗口通信：新窗口调用父窗口方法
qq_42931285的博客
09-16 3516
vue中跨窗口通信：新窗口调用父窗口方法
vue组件/页面间通信(vue eventbus)
wilL-my的博客
07-29 1307
首先，在main.js里面全局注册一个eventbus的方法。 Vue.prototype.$EventBus = new Vue() 分别在页面或组件中注册一个自定义事件和监听事件 this.$EventBus.$emit(自定义事件名, 数据); this.$EventBus.$emit("send","hello") --------------------------------------- this.$EventBus.$on("send",(val)=>{ co
两个用户在同一台电脑上登陆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]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值