斷網情況下，前端頁面處理

斷網頁面處理其實很多時候都會被忽略，其實這個做起來還是可以學到不少東西的。

主要有兩種方法：

一、使用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沒有網絡。

個人認為比較保險的方法還是在每個頁面都進行判斷，有拿到數據就認為有網，沒有就是斷網。