vue+signalr项目，调试报错Error: Server returned handshake error: Handshake was canceled.？

Question

项目中切换组件显示时，第一个可以正常展示数据，第二个就会连接报错

signalr.js

/* eslint-disable no-unused-vars */
// 引入安装的signalr包
import * as signalR from '@microsoft/signalr'

const signal = new signalR.HubConnectionBuilder()
  .configureLogging(signalR.LogLevel.Debug)
// 服务器地址
  .withUrl('http://192.168.2.5:8888/signalr', {})
  .withAutomaticReconnect() // 断开自动重
  .build()

const signalr = function () {
  let hub
  if (hub === undefined) {
    hub = signal
  }
  return hub
}

//  自动重连
async function start () {
  try {
    await signal.start()
    console.log('signalr connected successfully')
  } catch (err) {
    console.log(err)
    setTimeout(() => start(), 5000)
  }
}
// 关闭之后重连
signal.onclose(async () => {
  await start()
})

// 将创建的signal赋值给Vue实例
export default {
  // install方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。
  install (Vue) {
    Vue.prototype.signalr = signal
  }
}

使用的组件：

created () {
    this.init()
  },
methods:{
 init () {
      this.signalr.on('SendRotor', (data) => {
        this.arrdata.splice(data.id - 1, 1, data)
      })
}