1.在操作屏 设置发送长连接请求
// 长连接 方法methods :{sendWebSocket (data) {let sendData = data// 连接后台var vm = thisvm.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 = thisvm.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()}},}
小结 长连接 的使用，需要很好的控制连接数，不然后台的资源会造成浪费（请求用完后，就得删除）发送长连接请求的页面，不需要提前设置好长连接请求的初始化对象，只需要再需要操作的地方 调用长连接请求的方法 传入参数就可以了长连接请求的发送和长连接请求的接收，数据的type 要对应，同时你 还可以设置其它的 键值对 作为数据内容比如
// 长连接请求页面const obj ={type:'goHomeScreen',number:'1'}this.sendWebSocket(obj)// 长连接接收请求页面methods:{getWebSocket () {var vm = thisvm.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操作屏，对应三个屏分别展示 左中右的页面，在不同的三个浏览器窗
口。
效果 图 如下：
操作屏 主页（看路由区分）
左屏主页（看路由区分）
中屏主页（看路由区分）
右屏主页（看路由区分）
2.操作屏 高层领导（看路由区分）
*高层领导 左 看路由区分）
*高层领导 中 看路由区分）
*高层领导 右 看路由区分）
左屏 高层领导左页（看路由区分）
中屏 高层领导主页（看路由区分）
右屏 高层领导右页（看路由区分）
