Vue 项目断网时跳转到网络错误页面

爱被打了一巴掌 2023-06-10 15:30 355阅读 0赞

在项目中做异常处理时经常会遇到对网络错误的处理；处理的方案有很多，我只记录我在项目中使用的一种

首先添加网络错误页面(根据各自需求)：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70][]

2.在router中添加错误页面的路由

{
    
          path: '/networkError',
    
          component: require('@/public-component/no-network.vue').default, 
    
          name: 'networkError',
    
          meta: { title: '网络异常' } 
    }

这里面需要注意，不能使用路由懒加载

3.在APP.vue中添加监听网络

mounted() {
        window.addEventListener('offline', ()=>{
         // 网络由正常常到异常时触发
         sessionStorage.locationUrl=window.location.href;
         this.$router.replace('/networkError')
        });
        window.addEventListener('online',()=>{
          window.location.href=sessionStorage.locationUrl
        });
      },

在断网时会记录下当前页面的地址，开网络时会重新跳转到当前页面；

但是这种情况针对连接到WiFi，但是WiFi无网络时，这种情况不适用，测试时我发现，WiFi无网络时，接口会请求超时，可以在接口请求超时时做处理，可以参见我的博客[Vue项目请求超时处理][Vue]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70]: /images/20230531/d91f2322838247f0a59e5a91ae6e9c20.png
[Vue]: https://blog.csdn.net/qq_41725450/article/details/102780992

发表评论取消回复

表情：

评论列表（有 0 条评论，355人围观）

还没有评论，来说两句吧...

相关阅读

相关解决vue router打开新页面时会跳转到新页面底部

问题描述使用router进行页面跳转的时候，总是会跳转到新页面的底部`` -------------------- 原因分析：这是因为vue router默

桃扇骨/ 2024年03月27日 09:46/ 0 赞/ 86 阅读

相关【vue项目】中跳转页面

一、跳转外链页面替换当前页（重新定位当前页）：window.location.href EX：window.location.href = “http链接” 打卡

短命女/ 2023年10月12日 11:49/ 0 赞/ 58 阅读

相关 Vue项目启动后跳转到制定路由页面

前言今天把自己的项目布局完成了，但是想在项目启动的时候默认跳转到登录页面。 > 这其实需要借助路由实现跳转开始编写之前，大家可以看下我的布局： ![在这里插入图

灰太狼/ 2023年09月23日 23:10/ 0 赞/ 133 阅读

相关 vue 页面跳转

1.href//跳转刷新页面 @click = jumpCompanyProfile(item.picktextUrl)//参数是后台给的接口 jump

一时失言乱红尘/ 2023年08月17日 15:40/ 0 赞/ 174 阅读

相关 Vue 项目断网时跳转到网络错误页面

在项目中做异常处理时经常会遇到对网络错误的处理；处理的方案有很多，我只记录我在项目中使用的一种首先添加网络错误页面(根据各自需求)： ![watermark_type_Z

爱被打了一巴掌/ 2023年06月10日 15:30/ 0 赞/ 356 阅读

相关 vue 中js页面跳转到静态页面_Vue.js当前页面跳转当前页面$route.fullpath

在vue中如何去实现当前页面跳转当前页面，看完这篇文章，相信你的心里会有答案关于当前页面跳转在实际项目中有这个需求，当然，实现方式很多，在这里主要说一个比较优雅的方式，通过绑定

心已赠人/ 2022年10月27日 01:49/ 0 赞/ 242 阅读

相关 Vue跳转页面回到顶部设置

从A页面中间点击触发某事件跳转B，此时页面不会回到B页面顶部。 <template> <div class="policy-home"> //

た入场券/ 2022年10月25日 14:16/ 0 赞/ 289 阅读

相关 Vue 页面跳转

1.单页面跳转 1.1 无参数-- this.$router.push(path: ' 路由 ') 传递参数 -- this.$router.pus

Bertha 。/ 2022年03月26日 05:05/ 0 赞/ 349 阅读

相关 jsp页面出现错误时，跳转到另一个页面

在可能出现错误的页面导入：<%@ page errorPage=“error.jsp”%> 然后在错误处理页面导入：<%@ page isErrorPage=“tr

蔚落/ 2022年02月03日 14:47/ 0 赞/ 435 阅读

相关 vue 页面跳转

1.使用 `<router-link>` 创建 a 标签 <router-link to="/city"> <div>跳转</div> </

你的名字/ 2021年12月12日 13:57/ 0 赞/ 433 阅读