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

最新推荐文章于 2025-06-18 09:37:15 发布

原创最新推荐文章于 2025-06-18 09:37:15 发布 · 1.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端

功能专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种在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
  });
},