vue的标签页通信功能示例

文章说明

本文主要简单介绍标签页通信功能 BroadcastChannel 的基本使用，以及在vue中使用window.open 打开一个新标签页的功能

由于vue使用 window.open 打开新页面需要得到 URL 地址，所以需要路由

注意点说明

其中比较关键的是 vue使用window.open 打开新页面，这里涉及到路由的一些信息，需要填写好正确的路由

const newPage = router.resolve({
  name: 'MessageInfo',
  query: {
    content: item.content
  }
});
window.open(newPage.href, '_blank');

另外就是信息标签页关闭前需要向主页面发送一条消息，表示它被关闭了

window.addEventListener('beforeunload', () => {
  messageChannel.postMessage({
    close: true
  });
  messageChannel.close();
})

代码

App.vue

<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
</style>

路由的index.js

import {createRouter, createWebHashHistory} from "vue-router";

import MyIndex from "@/components/MyIndex.vue";
import MessageInfo from "@/components/MessageInfo.vue";

let routes = [
    {
        path: "/",
        name: 'MyIndex',
        component: MyIndex,
    },
    {
        path: "/messageInfo",
        name: 'MessageInfo',
        component: MessageInfo,
    },
];

const router = createRouter({
    history: createWebHashHistory(),
    routes,
});

export default router;

MyIndex.vue 组件的代码

<template>
  <h2 v-for="item in data.messageList" :key="item.id">
    {{ item.content }}
    <span @click="sendMessage(item)">发送</span>
  </h2>
</template>

<script>
import {reactive} from "vue";
import {useRouter} from "vue-router";

export default {
  name: "App",
  setup() {
    const data = reactive({
      messageList: [
        {
          id: 1,
          content: "信息1：我叫冰冰一号"
        },
        {
          id: 1,
          content: "信息2：我学习的专业是计算机"
        },
      ]
    });

    const router = useRouter();
    let newPageCount = 0;
    const messageChannel = new BroadcastChannel("message");

    function sendMessage(item) {
      if (newPageCount === 0) {
        const newPage = router.resolve({
          name: 'MessageInfo',
          query: {
            content: item.content
          }
        });
        window.open(newPage.href, '_blank');
        newPageCount++;
      } else {
        messageChannel.postMessage({
          content: item.content
        });
      }

      messageChannel.onmessage = event => {
        if (event.data.close === true) {
          newPageCount--;
        }
      };
    }

    return {
      data,
      sendMessage
    }
  }
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

h2 {
  padding: 0 30px;
  background-color: #409eff;
  line-height: 100px;
  margin: 10px;
  height: 100px;
}

h2 span {
  float: right;
  background-color: white;
  padding: 0 30px;
  line-height: 60px;
  height: 60px;
  margin: 20px 0;
  border: 1px solid black;
  border-radius: 10px;
  cursor: pointer;
}

h2 span:hover {
  background-color: #888888;
}
</style>

MessageInfo.vue 组件的代码

<template>
  <h2>{{ data.content }}</h2>
</template>

<script>
import {onBeforeMount, reactive} from "vue";
import {useRoute} from "vue-router";

export default {
  setup() {
    const data = reactive({
      content: ""
    });
    const router = useRoute();
    const messageChannel = new BroadcastChannel("message");

    onBeforeMount(() => {
      data.content = router.query.content;
      messageChannel.onmessage = event => {
        data.content = event.data.content;
      };

      window.addEventListener('beforeunload', () => {
        messageChannel.postMessage({
          close: true
        });
        messageChannel.close();
      })
    });

    return {
      data
    }
  }
}
</script>

<style scoped>

</style>

效果展示