解决 websocket未加载完切换页面卡顿问题

场景 ： a页面正在加载websocket，当切换页面 ，需要websocket加载完才会跳转 ， a页面的beforeDestroy钩子函数想要销毁websocket ， 也需要等加载完才执行钩子函数

解决思路 ： 在全局的路由导航钩子中是可以即刻监听到跳转页面的路径的 ， 只不过页面上还是在加载websocket ， 可以把ws定义在全局 ， 当切换页面 ， 在全局路由导航中 监听from.path , 如果是a页面跳转 ， 关闭websocket , 并且ws设置为null;

  <div id="instanceLog">
        <pre id="log"></pre>
      </div>

    showLog(instanceIp) {
      this.$global.ws = new WebSocket(
        this.wsAddress
      );
      this.$global.ws.onclose = this.onclose;
      this.$global.ws.onmessage = this.onmessage;
    },
    onclose(event) {
      console.log("DISCONNECT");
    },
    onmessage(event) {
      this.log("MESSAGE: " + event.data);
    },
    log(msg) {
      var log = document.getElementById("log");
      log.textContent += msg + "\n";
      log.scrollTop = log.scrollHeight;
    },

定义ws.js,并且在main.js引入

export default {
    ws: null,

}

在router.beforeEach中判断 , 如果是从有ws的那个页面跳转过来的 给ws关闭且清空；
 

  router.beforeEach(async (to, from, next) => {

    if (from.path == "/log/index/") {
       //页面切换路由ws关闭
      if (global.ws) {
        global.ws.close();
        global.ws = null;
      }
    }

})