vue项目中如何使用控制端去控制展示的内容_vue 项目构建统一修改 stomp-CSDN博客

本文链接：https://blog.csdn.net/tayswift/article/details/118091663

我们应该首先想的的是控制端和展示端是如何通信的
stompJS的使用

首先引入stompJS

import Stomp from "stompjs"; //引入stomp

STOMP javascript 客户端会使用ws://的URL与STOMP 服务端进行交互。
```
this.client = Stomp.client('ws://localhost:8081/stomp');
```

node创建server服务建立链接

var Stomp = require('stompjs');
var client = Stomp.overWS('ws://localhost:8081/stomp');

链接服务端

let connectCallback= () => {
  this.client.subscribe("/queue/test", (data) => {
    this.handleSubscribe(data); //处理接收到的信息
  });
};
this.client.connect(login='', passcode='', connectCallback, errorCallback, host);

发送信息

 this.client.send(
     'ws://localhost:8081/stomp',
      { "content-type": "text/plain" },
      JSON.stringify(data)
    );

vue项目中控制路由跳转

created() {
    this.$bus.$on("SCENE_SWITCH", (msg) => {
      this.$router.push({ name: msg });
    });
  },
 methods: {
    goTo(param) {
      try {
        this.client.send({ event: "SCENE_SWITCH", detail: param });
        this.$router.push({ name: param });
      } catch (error) {
        console.log(error);
      }
    },
  },