断网情况下，前端页面处理

断网页面处理其实很多时候都会被忽略，其实这个做起来还是可以学到不少东西的。

主要有两种方法：

一、使用vuex+axios拦截器

这种方法我只讲下思路：

在vuex里存储一个全局变量，先设置为true,再在request,js里的axios拦截器里改变它的值，当没有网络时，就设置为false,使用vuex的store.commit来更新。

然后在用app.vue，使用这个变量，使用v-if来决定提示用户连接网络的图片要不要出现。

其实这种方法不是很好，因为vuex被大材小用了，而且，app.vue就该什么都没有。当然，如果实在想用这种方法，那可以新建一个networkError.vue文件，当断网时就跳进这个页面。

二、使用navigator.online判断

这个方法比上面那个要友好一些，核心代码就这些

// 路由里面的代码
{path: '/networkError',component: require('@/views/index/networkError.vue').default, name: '网络异常',meta: { title: '网络异常' }
},

　　这里不要用路由懒加载，因为会动态加载，注意咱们现在是断网，直接用request

判断是否断网，断网的话，就跳转到networkError，提示用户检查网络。

 window.addEventListener('offline', () => {if (!navigator.onLine) {router.push('/networkError');}});

这个代码是写在路由里面的。此外不要用location进行跳转，因为会引起刷新。

其实第二种方法还是有弊端的，因为，还存在这种情况，用户连上wifi了，但是wifi没有网络。

个人认为比较保险的方法还是在每个页面都进行判断，有拿到数据就认为有网，没有就是断网。

转载于:https://www.cnblogs.com/caoshufang/p/10900367.html

断网情况下，前端页面处理相关推荐

断网python第三方库安装_Python离线断网情况下安装numpy、pandas和matplotlib等常用第三方包...
联网情况下在命令终端CMD中输入"pip install numpy"即可自动安装,pandas和matplotlib同理一样方法进行自动安装. 工作的电脑不能上外网,所以不能通过 ...
断网情况下安装python_断网环境下利用pip安装Python离线安装包
著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 这几天搞Windows离线断网环境下安装Python包,配置环境,各种坑!做个记录,供以后查询吧. # 生产环境 windows ...
断网的html页面,断网情况下，前端页面处理
断网页面处理其实很多时候都会被忽略,其实这个做起来还是可以学到不少东西的. 主要有两种方法: 一.使用vuex+axios拦截器这种方法我只讲下思路: 在vuex里存储一个全局变量,先设置为true ...
【转载】struts应用在断网情况下启动报错解决办法(java/net/AbstractPlainSocketImpl.java:178:-1)...
无意间struts应用在有网络的情况下启动正常,在断网的情况下启动报错,报错代码如下图所示: SEVERE: Exception starting filter struts2 Class: java ...
struts项目部署在Tomca上在断网情况下启动报错
转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6015693.html 前段时间,项目部署到现场后,反馈Tomcat能正常启动,但是项目有时访问不了也不报错. ...
java 断网处理_如何处理浏览器的断网情况？
好的断网处理会让人很舒适:lol的断线重连,王者荣耀的断线重连可以确保游戏的继续进行坏的断网处理甚至不处理会出bug:比如我手上的项目就出了个bug 业务人员表示非常苦恼网络问题一直是一个很值得 ...
如何处理浏览器的断网情况？
好的断网处理会让人很舒适:lol的断线重连,王者荣耀的断线重连可以确保游戏的继续进行坏的断网处理甚至不处理会出bug:比如我手上的项目就出了个bug 业务人员表示非常苦恼网络问题一直是一个很值得 ...
断网python第三方库安装_断网环境下利用pip安装Python离线安装包（转载）
这几天搞Windows离线断网环境下安装Python包,配置环境,各种坑!做个记录,供以后查询吧. # 生产环境 windows 7 # python 2.7.9 # pip 1.5.2 友情提示:当 ...
python小课离线版_断网环境下利用pip安装Python离线安装包
这几天搞Windows离线断网环境下安装Python包,配置环境,各种坑!做个记录,供以后查询吧. # 生产环境 windows 7 # python 2.7.9 # pip 1.5.2 友情提示:当 ...
如何使用nexus3在无外网情况下（如云桌面）配置npm私库
Nexus3配置npm私服有三个类型: host:本地存储,提供本地私服功能,可上传 proxy:提供代理其他仓库的类型 group: 组类型,组合多个仓库为一个地址,最终开发人员使用镜像源为该gro ...

断网情况下，前端页面处理

断网情况下，前端页面处理相关推荐

最新文章

热门文章