前端对于页面断网的处理

最新推荐文章于 2023-04-19 15:48:04 发布

weixin_33860737

最新推荐文章于 2023-04-19 15:48:04 发布

阅读量8k

点赞数 2

文章标签：前端 javascript 移动开发 ViewUI

原文链接：https://juejin.im/post/5cb6c18df265da034d2a0c37

版权

本文探讨了前端如何处理页面断网情况。在断网时，应用会显示重新加载提示，网络恢复后可返回原页面。通过创建断网页面，并利用axios的拦截器判断网络状态，实现断网时的页面跳转与状态管理。

摘要由CSDN通过智能技术生成

1、我们先来看看人家应用是怎么处理的

正常访问
断网时，会有个重新加载，当网络正常时，点击会回到原来的页面

下面说下思路吧，这里用的是vue

1.新建refresh.vue断网页面,当断网时，我们跳转到这个页面。

2.监听接口，在vuex中新建一个networkSuccess参数，断网为false,联网为true。

3.根据networkSuccess来判定跳不跳转到refresh.vue页面。

2、`vuex store.js`

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    networkSuccess: true //是否断网
  },
  mutations: {
    changeNetworkSuccess(state,val){ //改变状态
      state.networkSuccess = val
    }
  },
  actions: {

  }
})