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

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

主要有两种方法：

一、使用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没有网络。

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