前言

​ 由于本人的能力有限，如若有说得做的不对的地方，还望指出。当然，如若你有更好的方法，或者更优解，还望不吝赐教。

需求

​ 实时监听app的联网状态，在断开网络的时候，提示用户网络断开了

自己的想法

​ 监听用户的网络链接状态，如果断网，显示断网的页面。

实现

在app.vue文件中添加一个属性来监控网络是否是开启状态

1
2
3
4
5
data() {
    return {
      network: true, //默认有网
    };
  },

在app.vue 的mounted生命钩子函数里注册检测网络链接的状态

1
2
3
4
5
6
7
8
9
10
11
mounted() {
  // 检测断网
  window.addEventListener("offline", () => {
    console.log("已断网");
    this.network = false;
  });
  window.addEventListener("online", () => {
    console.log("网络已连接");
    this.network = true;
  });
},

在app.vue 的 判断network是否为false，如果是，跳转到断网的页面。为了简单，我就直接写在本页面上了

1
2
3
4
5
6
7
8
9
10
11
<div id="app">
   <div class="network" v-if="!network">
     网络已断开，链接网络，自动刷新
   </div>
   <div v-else>
     <keep-alive>
       <router-view :key="$route.path" v-if="$route.meta.keepAlive" />
     </keep-alive>
     <router-view :key="$route.path" v-if="!$route.meta.keepAlive" />
   </div>
 </div>
1
2
3
4
5
6
.network {
  width: 100vw;
  height: 100vh;
  line-height: 100vh;
  text-align: center;
}

注意：部分文章可能会在不就的将来更新

如果能够帮助到你，是小编最大的荣幸

当然 有 不好的地方 请大家帮忙指出 学习永无止境

小编一直认为 人外有人 天外有天 一起学习 共同进步

让我们共同加油吧！！！