vue中利用js检测网络状况，监听网络状态

在我们进入弱电井或网络信号不好的地方，就要判断网络状态，网络断开或连接状态可以弹出一个动画提示用户。

上代码：

<script>
    export default {
      data(){
       return{
         onLine:true,  //1.目前处于网络正常状态
       };
     },
      mounted(){
        //2. 监听网络状态事件
        window.addEventListener('online',this.update),  // 网络由异常到正常时触发
        window.addEventListener('offline',this.update)   //网络由正常到异常时触发
      },
      methods:{
        //3.更改网络状态，添加需要做的事
        update(res){
          console.log(res);
          this.onLine=res.type==='online'
          if(this.onLine){
            console.log('网络正常');
          }else{
            console.log('网络异常');

          }
        }
      },
      //4.销毁时移除监听事件
        //Vue实例对象销毁之前|此时el和data全都还在，
        //一般会在 beforeDestroy 这一步进行销毁定时器、解绑全局事件、销毁插件对象等操作
      beforeDestroy(){
          window.removeEventListener('online',  this.update);
          window.removeEventListener('offline', this.update)
      },
 </script>

可以参考

vue实时监听网络状态是wifi还是4G