在vue项目中监听电脑网络的状态

app.vue

data () {
    return {
        onLine: navigator.onLine  //  navigator.onLine 获取设备是否可以上网、连接网络
    }
},
created () {
    // 监听网络
    // 网络由异常到正常时触发
    window.addEventListener('online', this.updateOnlineStatus)
    // 网络由正常到异常触发
    window.addEventListener('offline', this.updateOfflineStatus)
},
methods: {
    updateOnlineStatus () {
        this.onLine = true
        console.log('网络连接成功')
    },
    updateOfflineStatus () {
        this.onLine = false
        console.log('网络断开连接')
    }
}