斷網(wǎng)頁(yè)面處理其實(shí)很多時(shí)候都會(huì)被忽略，其實(shí)這個(gè)做起來(lái)還是可以學(xué)到不少東西的。

主要有兩種方法：

一、使用vuex+axios攔截器

這種方法我只講下思路：

在vuex里存儲(chǔ)一個(gè)全局變量，先設(shè)置為true,再在request,js里的axios攔截器里改變它的值，當(dāng)沒(méi)有網(wǎng)絡(luò)時(shí)，就設(shè)置為false,使用vuex的store.commit來(lái)更新。

然后在用app.vue，使用這個(gè)變量，使用v-if來(lái)決定提示用戶連接網(wǎng)絡(luò)的圖片要不要出現(xiàn)。

其實(shí)這種方法不是很好，因?yàn)関uex被大材小用了，而且，app.vue就該什么都沒(méi)有。當(dāng)然，如果實(shí)在想用這種方法，那可以新建一個(gè)networkError.vue文件，當(dāng)斷網(wǎng)時(shí)就跳進(jìn)這個(gè)頁(yè)面。

二、使用navigator.online判斷

這個(gè)方法比上面那個(gè)要友好一些，核心代碼就這些

//路由里面的代碼

{

path:‘/networkError‘,

component: require(‘@/views/index/networkError.vue‘).default,

name:‘網(wǎng)絡(luò)異常‘,

meta: { title:‘網(wǎng)絡(luò)異常‘}

},

這里不要用路由懶加載，因?yàn)闀?huì)動(dòng)態(tài)加載，注意咱們現(xiàn)在是斷網(wǎng)，直接用request

判斷是否斷網(wǎng)，斷網(wǎng)的話，就跳轉(zhuǎn)到networkError，提示用戶檢查網(wǎng)絡(luò)。

window.addEventListener(‘offline‘, () =>{if (!navigator.onLine) {

router.push(‘/networkError‘);

}

});

這個(gè)代碼是寫(xiě)在路由里面的。此外不要用location進(jìn)行跳轉(zhuǎn)，因?yàn)闀?huì)引起刷新。

其實(shí)第二種方法還是有弊端的，因?yàn)?#xff0c;還存在這種情況，用戶連上wifi了，但是wifi沒(méi)有網(wǎng)絡(luò)。

個(gè)人認(rèn)為比較保險(xiǎn)的方法還是在每個(gè)頁(yè)面都進(jìn)行判斷，有拿到數(shù)據(jù)就認(rèn)為有網(wǎng)，沒(méi)有就是斷網(wǎng)。

原文：https://www.cnblogs.com/caoshufang/p/10900367.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。