场景 : 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;
}
}
})