网络异常页面

场景：移动端网络断开业务处理
框架：vue

// refresh.vue
<template>
  <div class="refresh">
    <van-empty :image="image" :description="description" />
  </div>
</template>

<script>
export default {
  name: 'refresh',
  props: {
    // 展示的图片
    image: {
      type: String,
      default: 'network'
    },
    description: {
      type: String,
      default: '网络已断开，请检查网络'
    }
  },
  mounted() {
    // 防止页面后退
    history.pushState(null, null, document.URL);
    window.addEventListener('popstate', this.handleEvent, false);
  },
  methods: {
    handleEvent() {
      history.pushState(null, null, document.URL);
    }
  },
  destroyed() {
    window.removeEventListener('popstate', this.handleEvent, false);
  }
};
</script>

<style lang="scss" scoped>
.refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
</style>

// App.vue
<template>
  <div class="main">
    <router-view  v-if="isOnline" />
    <refresh v-else />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isOnline: true, // 断网判断
      isRouterAlive: true // 控制视图是否显示的变量
    };
  },
  mounted() {
    // 获取当前网络状态
    this.navigatorOnline();
    // 监听网络连接状态
    window.addEventListener('online', this.handleOnline, false);
    window.addEventListener('offline', this.handleOnline, false);
  },
  methods: {
    // 获取网络连接状态
    navigatorOnline() {
      this.handleOnline({ type: navigator.onLine ? 'online' : 'offline' });
    },
    // 监听网络连接状态
    handleOnline(event) {
      this.isOnline = event.type === 'online';
    }
  },
  beforeDestroy() {
    // 清除监听 释放内存
    window.removeEventListener('online', this.handleOnline);
    window.removeEventListener('offline', this.handleOnline);
  }
};
</script>