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

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

主要有两种方法：

一、使用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: