使用BroadcastChannel广播通信
准备工作：
1.channel.js文件，内容如下
const Channel = {/*** BroadcastChannel对象Map*/channelMap: new Map(),/*** 发送消息，重载方法，可直接调用，省略对象实例化操作* @param {*} channelName 通道名称，用以区分不同的通道* @param {*} object 消息体*/send: (channelName, object) => {if (!Channel.channelMap.has(channelName)) {let channel = new BroadcastChannel(channelName);Channel.channelMap.set(channelName, channel);}Channel.channelMap.get(channelName).postMessage(object);},/*** 监听消息，重载方法，可直接调用，省略对象实例化操作* @param {*} channelName 通道名称，用以区分不同的通道* @param {*} callback 回调函数*/listen: (channelName, callback) => {if (!Channel.channelMap.has(channelName)) {let channel = new BroadcastChannel(channelName);Channel.channelMap.set(channelName, channel);}Channel.channelMap.get(channelName).onmessage = ({ data }) => {callback(data);};},/*** 通道关闭* @param {*} channelName 通道名称，用以区分不同的通道*/close: (channelName) => {if (Channel.channelMap.has(channelName)) {Channel.channelMap.get(channelName).close();Channel.channelMap.delete(channelName);}},/*** 通道枚举，定义业务中需要用到的所有通道名称枚举，可根据业务需求无限扩容*/channelEnum: {REMOVE_TAB: { name: 'removeTab', comment: 'tabs标签移除时，用以通知被关闭页面，进行诸如实例、注册事件等的销毁工作' },GLOBAL_LOADING: { name: 'globalLoading', comment: '全局加载动画' },TEST: { name: 'TEST_Channel', comment: 'TEST_Channel' },},
};export default Channel
2.选择是新打开页签还是新开窗口（下面代码二选一即可）
/*** 打开新窗口*/openNewWindow () {// 打开新窗口// 新窗口居中let left = ((window.screen.width / 2) - 180) / 2// 新窗口的宽度let width = (window.screen.width / 2) + 180// 新窗口要设置的参数let params = `height=${window.screen.height},width=${width},top=0,left=${left},toolbar=no,menubar=no,scrollbars=no,resizable=yes,location=yes,status=no`window.open(`/testPage/${this.title}/${this.id}/${this.type}/${this.date}`,'_blank',params)},/*** 打开新页签*/openNewTab() {// 打开新标签let routeData = this.$router.resolve(({// path 要跳转的路由地址path: '/testPage',// query 要传递的参数query: {title: this.title,id: this.id,type: this.type,date: this.date，}}))window.open(routeData.href, '_blank')},
代码编写与测试
第一步：
引入channel.js文件到项目中，再引入到页面中（生产者与消费者都需要引入）
第二步：
生产者代码：
send() {
console.log('-------send-------')Channel.send(Channel.channelEnum.TEST.name, '发消息了。。。:'+new Date())},
消费者代码：
mounted() {Channel.listen(Channel.channelEnum.TEST.name, this.listen)},methods:{listen(data) {
console.log('-------listen-------')console.log('收到消息:', data);},}
第三步：
测试效果
