Html5在window.navigator对象上添加了一个属性onLine 返回布尔值 true表示在线.同时新增了两个事件：
window.addEventListener('online', function(){
// 网络由异常到正常时触发
});
window.addEventListener('offline', function(){
// 网络由正常常到异常时触发
});
在vue中实现思路如下：
- data中初始化在线状态。
data(){
return{
onLine: navigator.onLine,
}
}
- mounted中监听事件
mounted(){
window.addEventListener('online', this.updateOnlineStatus);
window.addEventListener('offline', this.updateOnlineStatus);
}
- 方法中改变onLine值
methods:{
updateOnlineStatus(e) {
const { type } = e;
this.onLine = type === 'online';
},
}
4.最后 最好在销毁时解除事件监听
beforeDestroy(){
window.removeEventListener('online', this.updateOnlineStatus);
window.removeEventListener('offline', this.updateOnlineStatus);
},