前言

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

需求

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

自己的想法

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

实现

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

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

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

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

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

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

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

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

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

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

让我们共同加油吧！！！