vue.js中使用离线检测

Html5在window.navigator对象上添加了一个属性onLine 返回布尔值 true表示在线.同时新增了两个事件：

window.addEventListener('online',  function(){
     // 网络由异常到正常时触发
    });
    window.addEventListener('offline', function(){
     // 网络由正常常到异常时触发
    });

在vue中实现思路如下：

1. data中初始化在线状态。

data(){
    return{
        onLine: navigator.onLine,
    }
}

1. mounted中监听事件

mounted(){
    window.addEventListener('online',  this.updateOnlineStatus);
    window.addEventListener('offline', this.updateOnlineStatus);
}

1. 方法中改变onLine值

methods:{
    updateOnlineStatus(e) {
        const { type } = e;
        this.onLine = type === 'online';
      },
}

4.最后 最好在销毁时解除事件监听

beforeDestroy(){
 window.removeEventListener('online',  this.updateOnlineStatus);
 window.removeEventListener('offline', this.updateOnlineStatus);
},