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

主要有兩種方法：

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

總結

以上是生活随笔為你收集整理的断网的html页面,断网情况下，前端页面处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。