webScoket 长连接 在Vue项目中使用（实现1操作屏3展示屏的分屏效果）

1.在操作屏 设置发送长连接请求

//  长连接 方法
methods :{
sendWebSocket (data) {
      let sendData = data
      // 连接后台
      var vm = this
      vm.websocket = new WebSocket('ws://localhost:8010/webSocket')
      // 连接成功后发送数据
      vm.websocket.onopen = function () {
        vm.websocket.send(JSON.stringify(sendData))
        vm.websocket.close()  // 这个必须有 这样设置是为了合理控制连接数，这个长连接初始话出来 为的 就是发送请求，发送完后，应该销毁
      }
      // 连接错误时 重新连接
      vm.websocket.onerror = function () {
        vm.sendWebSocket(sendData)
      }
    }
    }

// 在需要的点击事件上绑好  长连接请求
this.sendWebSocket({type:''})
或者 你还可以
const obj ={
type:'goHomeScreen'
}
this.sendWebSocket(obj)

2.在显示屏，设置长连接接收请求 代码

// 首先 接收长连接请求的页面需要 初始化长连接对象， 然后再进行对应的操作后 需要断开长连接（为的就是合理控制资源）

  mounted () {
    this.getWebSocket()
  },
  //  因为的需求是 分屏展示，所以 当操作页面的请求发送后，分屏展示的页面只需要 根据对应的数据类型 去跳转路由，然后我再跳转完路由后，这个接收长连接请求的页面就不需要 这个连接了，所以要销毁（说白了，这个页面接收请求 ，就是为了跳转页面）
destroyed () {
    this.websocket.close()
  },


methods:{
  getWebSocket () {
      var vm = this
      vm.websocket = new WebSocket('ws://localhost:8010/webSocket')
      vm.websocket.onmessage = function (evt) {
        const obj = JSON.parse(evt.data)
        //  下面这个 判断的 type 就是你发长连接请求页面的参数的type，要一 一 对应，才行
        if (obj.type === 'goHomeScreen') {
          vm.$router.push({
            path: '/HomeScreen'
          })
        }
      }
      vm.websocket.onerror = function () {
        vm.getWebSocket()
      }
    },
}

3. 小结

• 长连接 的使用，需要很好的控制连接数，不然后台的资源会造成浪费（请求用完后，就得删除）
• 发送长连接请求的页面，不需要提前设置好长连接请求的初始化对象，只需要再需要操作的地方 调用长连接请求的方法 传入参数就可以了
• 长连接请求的发送和长连接请求的接收，数据的type 要对应，同时你 还可以设置其它的 键值对 作为数据内容比如

// 长连接请求页面
const obj ={
type:'goHomeScreen',
number:'1'
}
this.sendWebSocket(obj)


// 长连接接收请求页面

methods:{
  getWebSocket () {
      var vm = this
      vm.websocket = new WebSocket('ws://localhost:8010/webSocket')
      vm.websocket.onmessage = function (evt) {
        const obj = JSON.parse(evt.data)
        //  下面这个 判断的 type 就是你发长连接请求页面的参数的type，要一 一 对应，才行
        if (obj.type === 'LeaderToHome') {
                if(obj.number === '1'){
                //  响应的操作代码
                }
                      if(obj.number === 2'){
                //  响应的操作代码
                }
                ...
        }
      }
      vm.websocket.onerror = function () {
        vm.getWebSocket()
      }
    },
}

//  也就是说长连接请求的 对象内的参数就是为了区分不同长连接，想当于给长连接编号了，然后再接收的时候根据你的要求去找请求，然后左对应操作

4.以上是 长连接webscoket 在Vue前端的设置，想要实现1操作屏，三显示屏，你还得设计好路由
我的路由设置 如下

/*
 * 操作屏
 */
// 主界面
import operatHome from '../components/operatScreen/operatHome'
// 高层领导
import operatLeaderLeft from '../components/operatScreen/operatLeaderLeft'
import operatLeaderMid from '../components/operatScreen/operatLeaderMid'
import operatLeaderRight from '../components/operatScreen/operatLeaderRight'
// 中层干部
import operatMidderLeft from '../components/operatScreen/operatMidderLeft'
import operatMidderMid from '../components/operatScreen/operatMidderMid'
import operatMidderRight from '../components/operatScreen/operatMidderRight'
// HR 人员
// HR人员主界面
import operatHrpsHome from '../components/operatScreen/operatHrpsHome'
// HR人员-组织管理
import operatHrpsOrgLeft from '../components/operatScreen/operatHrpsOrgLeft'
import operatHrpsOrgMid from '../components/operatScreen/operatHrpsOrgMid'
import operatHrpsOrgRight from '../components/operatScreen/operatHrpsOrgRight'
// HR 人员-员工管理
import operatHrpsStaffLeft from '../components/operatScreen/operatHrpsStaffLeft'
import operatHrpsStaffMid from '../components/operatScreen/operatHrpsStaffMid'
import operatHrpsStaffRight from '../components/operatScreen/operatHrpsStaffRight'
// HR人员-薪资管理
import operatHrpsSalaryLeft from '../components/operatScreen/operatHrpsSalaryLeft'
import operatHrpsSalaryMid from '../components/operatScreen/operatHrpsSalaryMid'
import operatHrpsSalaryRight from '../components/operatScreen/operatHrpsSalaryRight'
// HR人员-社保福利
import operatHrpsWelfareLeft from '../components/operatScreen/operatHrpsWelfareLeft'
import operatHrpsWelfareMid from '../components/operatScreen/operatHrpsWelfareMid'
import operatHrpsWelfareRight from '../components/operatScreen/operatHrpsWelfareRight'
// HR 人员-假情管理
import operatHrpsHolidayLeft from '../components/operatScreen/operatHrpsHolidayLeft'
import operatHrpsHolidayMid from '../components/operatScreen/operatHrpsHolidayMid'
import operatHrpsHolidayRight from '../components/operatScreen/operatHrpsHolidayRight'
// HR人员-共享服务
import operatHrpsShareLeft from '../components/operatScreen/operatHrpsShareLeft'
import operatHrpsShareMid from '../components/operatScreen/operatHrpsShareMid'
import operatHrpsShareRight from '../components/operatScreen/operatHrpsShareRight'
// HR人员-目标绩效
import operatHrpsTargetLeft from '../components/operatScreen/operatHrpsTargetLeft'
import operatHrpsTargetLeft01 from '../components/operatScreen/operatHrpsTargetLeft01'
import operatHrpsTargetLeft02 from '../components/operatScreen/operatHrpsTargetLeft02'
import operatHrpsTargetLeft03 from '../components/operatScreen/operatHrpsTargetLeft03'
import operatHrpsTargetLeft04 from '../components/operatScreen/operatHrpsTargetLeft04'
import operatHrpsTargetLeft05 from '../components/operatScreen/operatHrpsTargetLeft05'
import operatHrpsTargetMid from '../components/operatScreen/operatHrpsTargetMid'
import operatHrpsTargetMid01 from '../components/operatScreen/operatHrpsTargetMid01'
import operatHrpsTargetMid02 from '../components/operatScreen/operatHrpsTargetMid02'
import operatHrpsTargetMid03 from '../components/operatScreen/operatHrpsTargetMid03'
import operatHrpsTargetMid04 from '../components/operatScreen/operatHrpsTargetMid04'
import operatHrpsTargetMid05 from '../components/operatScreen/operatHrpsTargetMid05'
import operatHrpsTargetRight from '../components/operatScreen/operatHrpsTargetRight'
// HR人员-人才发展
import operatHrpsTalentLeft from '../components/operatScreen/operatHrpsTalentLeft'
import operatHrpsTalentMid from '../components/operatScreen/operatHrpsTalentMid'
import operatHrpsTalentRight from '../components/operatScreen/operatHrpsTalentRight'
// HR人员-组织发展
import operatHrpsOrgDevLeft from '../components/operatScreen/operatHrpsOrgDevLeft'
import operatHrpsOrgDevMid from '../components/operatScreen/operatHrpsOrgDevMid'
import operatHrpsOrgDevRight from '../components/operatScreen/operatHrpsOrgDevRight'
// HR人员-培训学习
import operatHrpsLearnLeft from '../components/operatScreen/operatHrpsLearnLeft'
import operatHrpsLearnMid from '../components/operatScreen/operatHrpsLearnMid'
import operatHrpsLearnRight from '../components/operatScreen/operatHrpsLearnRight'
// HR人员-招聘管理
import operatHrpsHireLeft from '../components/operatScreen/operatHrpsHireLeft'
import operatHrpsHireMid from '../components/operatScreen/operatHrpsHireMid'
import operatHrpsHireRight from '../components/operatScreen/operatHrpsHireRight'
// HR人员-企业文化
import operatHrpsCultureLeft from '../components/operatScreen/operatHrpsCultureLeft'
import operatHrpsCultureMid from '../components/operatScreen/operatHrpsCultureMid'
import operatHrpsCultureRight from '../components/operatScreen/operatHrpsCultureRight'
// 普通员工
import operatPlainLeft from '../components/operatScreen/operatPlainLeft'
import operatPlainMid from '../components/operatScreen/operatPlainMid'
import operatPlainRight from '../components/operatScreen/operatPlainRight'

/*
 *左屏
 */
// 主界面
import LeftShowHome from '../components/leftShowScreen/LeftShowHome'
// 高层领导
import LeftShowLeader from '../components/leftShowScreen/LeftShowLeader'
// 中层干部
import LeftShowMidder from '../components/leftShowScreen/LeftShowMidder'
// HR 人员
// HR人员主界面
import LeftShowHrpsHome from '../components/leftShowScreen/LeftShowHrpsHome'
// HR 人员-组织管理
import LeftShowHrpsOrg from '../components/leftShowScreen/LeftShowHrpsOrg'
// HR 人员-员工管理
import LeftShowHrpsStaff from '../components/leftShowScreen/LeftShowHrpsStaff'
// HR人员-薪资管理
import LeftShowHrpsSalary from '../components/leftShowScreen/LeftShowHrpsSalary'
// HR人员-社保福利
import LeftShowHrpsWelfare from '../components/leftShowScreen/LeftShowHrpsWelfare'
// HR人员-假情管理
import LeftShowHrpsHoliday from '../components/leftShowScreen/LeftShowHrpsHoliday'
// HR人员-共享服务
import LeftShowHrpsShare from '../components/leftShowScreen/LeftShowHrpsShare'
// HR人员-目标绩效
import LeftShowHrpsTarget from '../components/leftShowScreen/LeftShowHrpsTarget'
import LeftShowHrpsTarget01 from '../components/leftShowScreen/LeftShowHrpsTarget01'
import LeftShowHrpsTarget02 from '../components/leftShowScreen/LeftShowHrpsTarget02'
import LeftShowHrpsTarget03 from '../components/leftShowScreen/LeftShowHrpsTarget03'
import LeftShowHrpsTarget04 from '../components/leftShowScreen/LeftShowHrpsTarget04'
import LeftShowHrpsTarget05 from '../components/leftShowScreen/LeftShowHrpsTarget05'
// HR人员-人才发展
import LeftShowHrpsTalent from '../components/leftShowScreen/LeftShowHrpsTalent'
// HR人员-组织发展
import LeftShowHrpsOrgDev from '../components/leftShowScreen/LeftShowHrpsOrgDev'
// HR人员-培训学习
import LeftShowHrpsLearn from '../components/leftShowScreen/LeftShowHrpsLearn'
// HR人员-招聘管理
import LeftShowHrpsHire from '../components/leftShowScreen/LeftShowHrpsHire'
// HR人员-企业文化
import LeftShowHrpsCulture from '../components/leftShowScreen/LeftShowHrpsCulture'
// 普通员工
import LeftShowPlain from '../components/leftShowScreen/LeftShowPlain'

/*
 *中屏
 */
// 主界面
import MidShowHome from '../components/midShowScreen/MidShowHome'
// 高层领导
import MidShowLeader from '../components/midShowScreen/MidShowLeader'
// 中层干部
import MidShowMidder from '../components/midShowScreen/MidShowMidder'
// HR 人员
// HR人员主界面
import MidShowHrpsHome from '../components/midShowScreen/MidShowHrpsHome'
// HR 人员-组织管理
import MidShowHrpsOrg from '../components/midShowScreen/MidShowHrpsOrg'
// HR 人员-员工管理
import MidShowHrpsStaff from '../components/midShowScreen/MidShowHrpsStaff'
// HR人员-薪资管理
import MidShowHrpsSalary from '../components/midShowScreen/MidShowHrpsSalary'
// HR人员-社保福利
import MidShowHrpsWelfare from '../components/midShowScreen/MidShowHrpsWelfare'
// HR人员-假情管理
import MidShowHrpsHoliday from '../components/midShowScreen/MidShowHrpsHoliday'
// HR人员-共享服务
import MidShowHrpsShare from '../components/midShowScreen/MidShowHrpsShare'
// HR人员-目标绩效
import MidShowHrpsTarget from '../components/midShowScreen/MidShowHrpsTarget'
import MidShowHrpsTarget01 from '../components/midShowScreen/MidShowHrpsTarget01'
import MidShowHrpsTarget02 from '../components/midShowScreen/MidShowHrpsTarget02'
import MidShowHrpsTarget03 from '../components/midShowScreen/MidShowHrpsTarget03'
import MidShowHrpsTarget04 from '../components/midShowScreen/MidShowHrpsTarget04'
import MidShowHrpsTarget05 from '../components/midShowScreen/MidShowHrpsTarget05'
// HR人员-人才发展
import MidShowHrpsTalent from '../components/midShowScreen/MidShowHrpsTalent'
// HR人员-组织发展
import MidShowHrpsOrgDev from '../components/midShowScreen/MidShowHrpsOrgDev'
// HR人员-培训学习
import MidShowHrpsLearn from '../components/midShowScreen/MidShowHrpsLearn'
// HR人员-招聘管理
import MidShowHrpsHire from '../components/midShowScreen/MidShowHrpsHire'
// HR人员-企业文化
import MidShowHrpsCulture from '../components/midShowScreen/MidShowHrpsCulture'
// 普通员工
import MidShowPlain from '../components/midShowScreen/MidShowPlain'

/*
 *右屏
 */
// 主界面
import RightShowHome from '../components/rightShowScreen/RightShowHome'
// 高层领导
import RightShowLeader from '../components/rightShowScreen/RightShowLeader'
// 中层干部
import RightShowMidder from '../components/rightShowScreen/RightShowMidder'
// HR 人员
// HR人员主界面
import RightShowHrpsHome from '../components/rightShowScreen/RightShowHrpsHome'
// HR 人员-组织管理
import RightShowHrpsOrg from '../components/rightShowScreen/RightShowHrpsOrg'
// HR 人员-员工管理
import RightShowHrpsStaff from '../components/rightShowScreen/RightShowHrpsStaff'
// HR人员-薪资管理
import RightShowHrpsSalary from '../components/rightShowScreen/RightShowHrpsSalary'
// HR人员-社保福利
import RightShowHrpsWelfare from '../components/rightShowScreen/RightShowHrpsWelfare'
// HR人员-假情管理
import RightShowHrpsHoliday from '../components/rightShowScreen/RightShowHrpsHoliday'
// HR人员-共享服务
import RightShowHrpsShare from '../components/rightShowScreen/RightShowHrpsShare'
// HR人员-目标绩效
import RightShowHrpsTarget from '../components/rightShowScreen/RightShowHrpsTarget'
// HR人员-人才发展
import RightShowHrpsTalent from '../components/rightShowScreen/RightShowHrpsTalent'
// HR人员-组织发展
import RightShowHrpsOrgDev from '../components/rightShowScreen/RightShowHrpsOrgDev'
// HR人员-培训学习
import RightShowHrpsLearn from '../components/rightShowScreen/RightShowHrpsLearn'
// HR人员-招聘管理
import RightShowHrpsHire from '../components/rightShowScreen/RightShowHrpsHire'
// HR人员-企业文化
import RightShowHrpsCulture from '../components/rightShowScreen/RightShowHrpsCulture'
// 普通员工
import RightShowPlain from '../components/rightShowScreen/RightShowPlain'

Vue.use(Router)
export default new Router({
  routes: [
    /*
     *操作屏
     */
    {
      path: '/',
      name: 'operatHome',
      component: operatHome
    },
    {
      path: '/operatLeaderLeft',
      name: 'operatLeaderLeft',
      component: operatLeaderLeft
    },
    {
      path: '/operatLeaderMid',
      name: 'operatLeaderMid',
      component: operatLeaderMid
    },
    {
      path: '/operatLeaderRight',
      name: 'operatLeaderRight',
      component: operatLeaderRight
    },
    {
      path: '/operatMidderLeft',
      name: 'operatMidderLeft',
      component: operatMidderLeft
    },
    {
      path: '/operatMidderMid',
      name: 'operatMidderMid',
      component: operatMidderMid
    },
    {
      path: '/operatMidderRight',
      name: 'operatMidderRight',
      component: operatMidderRight
    },
    {
      path: '/operatHrpsHome',
      name: 'operatHrpsHome',
      component: operatHrpsHome
    },
    {
      path: '/operatHrpsOrgLeft',
      name: 'operatHrpsOrgLeft',
      component: operatHrpsOrgLeft
    },
    {
      path: '/operatHrpsOrgMid',
      name: 'operatHrpsOrgMid',
      component: operatHrpsOrgMid
    },
    {
      path: '/operatHrpsOrgRight',
      name: 'operatHrpsOrgRight',
      component: operatHrpsOrgRight
    },
    {
      path: '/operatHrpsStaffLeft',
      name: 'operatHrpsStaffLeft',
      component: operatHrpsStaffLeft
    },
    {
      path: '/operatHrpsStaffMid',
      name: 'operatHrpsStaffMid',
      component: operatHrpsStaffMid
    },
    {
      path: '/operatHrpsStaffRight',
      name: 'operatHrpsStaffRight',
      component: operatHrpsStaffRight
    },
    {
      path: '/operatHrpsSalaryLeft',
      name: 'operatHrpsSalaryLeft',
      component: operatHrpsSalaryLeft
    },
    {
      path: '/operatHrpsSalaryMid',
      name: 'operatHrpsSalaryMid',
      component: operatHrpsSalaryMid
    },
    {
      path: '/operatHrpsSalaryRight',
      name: 'operatHrpsSalaryRight',
      component: operatHrpsSalaryRight
    },
    {
      path: '/operatHrpsWelfareLeft',
      name: 'operatHrpsWelfareLeft',
      component: operatHrpsWelfareLeft
    },
    {
      path: '/operatHrpsWelfareMid',
      name: 'operatHrpsWelfareMid',
      component: operatHrpsWelfareMid
    },
    {
      path: '/operatHrpsWelfareRight',
      name: 'operatHrpsWelfareRight',
      component: operatHrpsWelfareRight
    },
    {
      path: '/operatHrpsHolidayLeft',
      name: 'operatHrpsHolidayLeft',
      component: operatHrpsHolidayLeft
    },
    {
      path: '/operatHrpsHolidayMid',
      name: 'operatHrpsHolidayMid',
      component: operatHrpsHolidayMid
    },
    {
      path: '/operatHrpsHolidayRight',
      name: 'operatHrpsHolidayRight',
      component: operatHrpsHolidayRight
    },
    {
      path: '/operatHrpsShareLeft',
      name: 'operatHrpsShareLeft',
      component: operatHrpsShareLeft
    },
    {
      path: '/operatHrpsShareMid',
      name: 'operatHrpsShareMid',
      component: operatHrpsShareMid
    },
    {
      path: '/operatHrpsShareRight',
      name: 'operatHrpsShareRight',
      component: operatHrpsShareRight
    },
    {
      path: '/operatHrpsTargetLeft',
      name: 'operatHrpsTargetLeft',
      component: operatHrpsTargetLeft
    },
    {
      path: '/operatHrpsTargetLeft01',
      name: 'operatHrpsTargetLeft01',
      component: operatHrpsTargetLeft01
    },
    {
      path: '/operatHrpsTargetLeft02',
      name: 'operatHrpsTargetLeft02',
      component: operatHrpsTargetLeft02
    },
    {
      path: '/operatHrpsTargetLeft03',
      name: 'operatHrpsTargetLeft03',
      component: operatHrpsTargetLeft03
    },
    {
      path: '/operatHrpsTargetLeft04',
      name: 'operatHrpsTargetLeft04',
      component: operatHrpsTargetLeft04
    },
    {
      path: '/operatHrpsTargetLeft05',
      name: 'operatHrpsTargetLeft05',
      component: operatHrpsTargetLeft05
    },
    {
      path: '/operatHrpsTargetMid',
      name: 'operatHrpsTargetMid',
      component: operatHrpsTargetMid
    },
    {
      path: '/operatHrpsTargetMid01',
      name: 'operatHrpsTargetMid01',
      component: operatHrpsTargetMid01
    },
    {
      path: '/operatHrpsTargetMid02',
      name: 'operatHrpsTargetMid02',
      component: operatHrpsTargetMid02
    },
    {
      path: '/operatHrpsTargetMid03',
      name: 'operatHrpsTargetMid03',
      component: operatHrpsTargetMid03
    },
    {
      path: '/operatHrpsTargetMid04',
      name: 'operatHrpsTargetMid04',
      component: operatHrpsTargetMid04
    },
    {
      path: '/operatHrpsTargetMid05',
      name: 'operatHrpsTargetMid05',
      component: operatHrpsTargetMid05
    },
    {
      path: '/operatHrpsTargetRight',
      name: 'operatHrpsTargetRight',
      component: operatHrpsTargetRight
    },
    {
      path: '/operatHrpsTalentLeft',
      name: 'operatHrpsTalentLeft',
      component: operatHrpsTalentLeft
    },
    {
      path: '/operatHrpsTalentMid',
      name: 'operatHrpsTalentMid',
      component: operatHrpsTalentMid
    },
    {
      path: '/operatHrpsTalentRight',
      name: 'operatHrpsTalentRight',
      component: operatHrpsTalentRight
    },
    {
      path: '/operatHrpsOrgDevLeft',
      name: 'operatHrpsOrgDevLeft',
      component: operatHrpsOrgDevLeft
    },
    {
      path: '/operatHrpsOrgDevMid',
      name: 'operatHrpsOrgDevMid',
      component: operatHrpsOrgDevMid
    },
    {
      path: '/operatHrpsOrgDevRight',
      name: 'operatHrpsOrgDevRight',
      component: operatHrpsOrgDevRight
    },
    {
      path: '/operatHrpsLearnLeft',
      name: 'operatHrpsLearnLeft',
      component: operatHrpsLearnLeft
    },
    {
      path: '/operatHrpsLearnMid',
      name: 'operatHrpsLearnMid',
      component: operatHrpsLearnMid
    },
    {
      path: '/operatHrpsLearnRight',
      name: 'operatHrpsLearnRight',
      component: operatHrpsLearnRight
    },
    {
      path: '/operatHrpsHireLeft',
      name: 'operatHrpsHireLeft',
      component: operatHrpsHireLeft
    },
    {
      path: '/operatHrpsHireMid',
      name: 'operatHrpsHireMid',
      component: operatHrpsHireMid
    },
    {
      path: '/operatHrpsHireRight',
      name: 'operatHrpsHireRight',
      component: operatHrpsHireRight
    },
    {
      path: '/operatHrpsCultureLeft',
      name: 'operatHrpsCultureLeft',
      component: operatHrpsCultureLeft
    },
    {
      path: '/operatHrpsCultureMid',
      name: 'operatHrpsCultureMid',
      component: operatHrpsCultureMid
    },
    {
      path: '/operatHrpsCultureRight',
      name: 'operatHrpsCultureRight',
      component: operatHrpsCultureRight
    },
    {
      path: '/operatPlainLeft',
      name: 'operatPlainLeft',
      component: operatPlainLeft
    },
    {
      path: '/operatPlainMid',
      name: 'operatPlainMid',
      component: operatPlainMid
    },
    {
      path: '/operatPlainRight',
      name: 'operatPlainRight',
      component: operatPlainRight
    },
    /*
     *左屏
     */
    {
      path: '/LeftShowHome',
      name: 'LeftShowHome',
      component: LeftShowHome
    },
    {
      path: '/LeftShowLeader',
      name: 'LeftShowLeader',
      component: LeftShowLeader
    },
    {
      path: '/LeftShowMidder',
      name: 'LeftShowMidder',
      component: LeftShowMidder
    },
    {
      path: '/LeftShowHrpsHome',
      name: 'LeftShowHrpsHome',
      component: LeftShowHrpsHome
    },
    {
      path: '/LeftShowHrpsOrg',
      name: 'LeftShowHrpsOrg',
      component: LeftShowHrpsOrg
    },
    {
      path: '/LeftShowHrpsStaff',
      name: 'LeftShowHrpsStaff',
      component: LeftShowHrpsStaff
    },
    {
      path: '/LeftShowHrpsSalary',
      name: 'LeftShowHrpsSalary',
      component: LeftShowHrpsSalary
    },
    {
      path: '/LeftShowHrpsWelfare',
      name: 'LeftShowHrpsWelfare',
      component: LeftShowHrpsWelfare
    },
    {
      path: '/LeftShowHrpsHoliday',
      name: 'LeftShowHrpsHoliday',
      component: LeftShowHrpsHoliday
    },
    {
      path: '/LeftShowHrpsShare',
      name: 'LeftShowHrpsShare',
      component: LeftShowHrpsShare
    },
    {
      path: '/LeftShowHrpsTarget',
      name: 'LeftShowHrpsTarget',
      component: LeftShowHrpsTarget
    },
    {
      path: '/LeftShowHrpsTarget01',
      name: 'LeftShowHrpsTarget01',
      component: LeftShowHrpsTarget01
    },
    {
      path: '/LeftShowHrpsTarget02',
      name: 'LeftShowHrpsTarget02',
      component: LeftShowHrpsTarget02
    },
    {
      path: '/LeftShowHrpsTarget03',
      name: 'LeftShowHrpsTarget03',
      component: LeftShowHrpsTarget03
    },
    {
      path: '/LeftShowHrpsTarget04',
      name: 'LeftShowHrpsTarget04',
      component: LeftShowHrpsTarget04
    },
    {
      path: '/LeftShowHrpsTarget05',
      name: 'LeftShowHrpsTarget05',
      component: LeftShowHrpsTarget05
    },
    {
      path: '/LeftShowHrpsTalent',
      name: 'LeftShowHrpsTalent',
      component: LeftShowHrpsTalent
    },
    {
      path: '/LeftShowHrpsOrgDev',
      name: 'LeftShowHrpsOrgDev',
      component: LeftShowHrpsOrgDev
    },
    {
      path: '/LeftShowHrpsLearn',
      name: 'LeftShowHrpsLearn',
      component: LeftShowHrpsLearn
    },
    {
      path: '/LeftShowHrpsHire',
      name: 'LeftShowHrpsHire',
      component: LeftShowHrpsHire
    },
    {
      path: '/LeftShowHrpsCulture',
      name: 'LeftShowHrpsCulture',
      component: LeftShowHrpsCulture
    },
    {
      path: '/LeftShowPlain',
      name: 'LeftShowPlain',
      component: LeftShowPlain
    },
    /*
     *中屏
     */
    {
      path: '/MidShowHome',
      name: 'MidShowHome',
      component: MidShowHome
    },
    {
      path: '/MidShowLeader',
      name: 'MidShowLeader',
      component: MidShowLeader
    },
    {
      path: '/MidShowMidder',
      name: 'MidShowMidder',
      component: MidShowMidder
    },
    {
      path: '/MidShowHrpsHome',
      name: 'MidShowHrpsHome',
      component: MidShowHrpsHome
    },
    {
      path: '/MidShowHrpsOrg',
      name: 'MidShowHrpsOrg',
      component: MidShowHrpsOrg
    },
    {
      path: '/MidShowHrpsStaff',
      name: 'MidShowHrpsStaff',
      component: MidShowHrpsStaff
    },
    {
      path: '/MidShowHrpsSalary',
      name: 'MidShowHrpsSalary',
      component: MidShowHrpsSalary
    },
    {
      path: '/MidShowHrpsWelfare',
      name: 'MidShowHrpsWelfare',
      component: MidShowHrpsWelfare
    },
    {
      path: '/MidShowHrpsHoliday',
      name: 'MidShowHrpsHoliday',
      component: MidShowHrpsHoliday
    },
    {
      path: '/MidShowHrpsShare',
      name: 'MidShowHrpsShare',
      component: MidShowHrpsShare
    },
    {
      path: '/MidShowHrpsTarget',
      name: 'MidShowHrpsTarget',
      component: MidShowHrpsTarget
    },
    {
      path: '/MidShowHrpsTarget01',
      name: 'MidShowHrpsTarget01',
      component: MidShowHrpsTarget01
    },
    {
      path: '/MidShowHrpsTarget02',
      name: 'MidShowHrpsTarget02',
      component: MidShowHrpsTarget02
    },
    {
      path: '/MidShowHrpsTarget03',
      name: 'MidShowHrpsTarget03',
      component: MidShowHrpsTarget03
    },
    {
      path: '/MidShowHrpsTarget04',
      name: 'MidShowHrpsTarget04',
      component: MidShowHrpsTarget04
    },
    {
      path: '/MidShowHrpsTarget05',
      name: 'MidShowHrpsTarget05',
      component: MidShowHrpsTarget05
    },
    {
      path: '/MidShowHrpsTalent',
      name: 'MidShowHrpsTalent',
      component: MidShowHrpsTalent
    },
    {
      path: '/MidShowHrpsOrgDev',
      name: 'MidShowHrpsOrgDev',
      component: MidShowHrpsOrgDev
    },
    {
      path: '/MidShowHrpsLearn',
      name: 'MidShowHrpsLearn',
      component: MidShowHrpsLearn
    },
    {
      path: '/MidShowHrpsHire',
      name: 'MidShowHrpsHire',
      component: MidShowHrpsHire
    },
    {
      path: '/MidShowHrpsCulture',
      name: 'MidShowHrpsCulture',
      component: MidShowHrpsCulture
    },
    {
      path: '/MidShowPlain',
      name: 'MidShowPlain',
      component: MidShowPlain
    },
    /**
     * 右屏
     */
    {
      path: '/RightShowHome',
      name: 'RightShowHome',
      component: RightShowHome
    },
    {
      path: '/RightShowLeader',
      name: 'RightShowLeader',
      component: RightShowLeader
    },
    {
      path: '/RightShowMidder',
      name: 'RightShowMidder',
      component: RightShowMidder
    },
    {
      path: '/RightShowHrpsHome',
      name: 'RightShowHrpsHome',
      component: RightShowHrpsHome
    },
    {
      path: '/RightShowHrpsOrg',
      name: 'RightShowHrpsOrg',
      component: RightShowHrpsOrg
    },
    {
      path: '/RightShowHrpsStaff',
      name: 'RightShowHrpsStaff',
      component: RightShowHrpsStaff
    },
    {
      path: '/RightShowHrpsSalary',
      name: 'RightShowHrpsSalary',
      component: RightShowHrpsSalary
    },
    {
      path: '/RightShowHrpsWelfare',
      name: 'RightShowHrpsWelfare',
      component: RightShowHrpsWelfare
    },
    {
      path: '/RightShowHrpsHoliday',
      name: 'RightShowHrpsHoliday',
      component: RightShowHrpsHoliday
    },
    {
      path: '/RightShowHrpsShare',
      name: 'RightShowHrpsShare',
      component: RightShowHrpsShare
    },
    {
      path: '/RightShowHrpsTarget',
      name: 'RightShowHrpsTarget',
      component: RightShowHrpsTarget
    },
    {
      path: '/RightShowHrpsTalent',
      name: 'RightShowHrpsTalent',
      component: RightShowHrpsTalent
    },
    {
      path: '/RightShowHrpsOrgDev',
      name: 'RightShowHrpsOrgDev',
      component: RightShowHrpsOrgDev
    },
    {
      path: '/RightShowHrpsLearn',
      name: 'RightShowHrpsLearn',
      component: RightShowHrpsLearn
    },
    {
      path: '/RightShowHrpsHire',
      name: 'RightShowHrpsHire',
      component: RightShowHrpsHire
    },
    {
      path: '/RightShowHrpsCulture',
      name: 'RightShowHrpsCulture',
      component: RightShowHrpsCulture
    },
    {
      path: '/RightShowPlain',
      name: 'RightShowPlain',
      component: RightShowPlain
    }
  ]
})

5.长连接加上路由设置，就能实现 1操作屏，对应三个屏分别展示 左中右的页面，在不同的三个浏览器窗
口。
效果 图 如下：

1. 操作屏 主页（看路由区分）
   

• 左屏主页（看路由区分）
  
• 中屏主页（看路由区分）
  
• 右屏主页（看路由区分）
  

2.操作屏 高层领导（看路由区分）
*高层领导 左 看路由区分）

*高层领导 中 看路由区分）

*高层领导 右 看路由区分）

• 左屏 高层领导左页（看路由区分）
  

• 中屏 高层领导主页（看路由区分）
  

• 右屏 高层领导右页（看路由区分）