vue根据断网状态显示断网的信息界面

需求：断网状态显示断网的信息界面(noNetwork.vue)
注意：只能监控到wifi断开时的状态，如果wifi连接无网络无法显示

一、路由配置(routes/index.js)

注意：不可以使用路由懒加载的方式

 {
     name: 'noNetwork',
     path: 'noNetwork',
     component:require('@/components/errorStatus/noNetwork.vue').default
 },

二、全局中设置（App.vue）

mounted() {
  window.addEventListener('offline', ()=>{
   // 网络由正常到异常时才会触发
   sessionStorage.locationUrl=window.location.href;
   this.$router.replace('noNetwork')
  });
  window.addEventListener('online',()=>{
    window.location.href=sessionStorage.locationUrl
  });
},

效果界面

测试：wifi断开刷新页面就会显示了