uni-app项目网络异常跳转到404页面
1.跳转到404页面流程
1.某个A页面,发送某个请求,网络异常,拿不到响应
1.1 这个时候,我们记录当前页面地址url 存储到页面地址
1.2 进行页面跳转,有两种方法:
1.2.1 使用uni.redirectTo 跳转到404 页面,因为redirectTo方法不会把调用redirectTo方法的页面加入堆栈,所以跳转后堆栈 :[‘首页’,‘404’],redirectTo方法表现形式:关闭当前页面,跳转到应用内的某个页面
1.2.2 如果我们使用navigateTo方法跳转404,navigateTo方法会把使用navigateTo方法的页面,会被加入堆栈中,跳转后堆栈 :[‘首页’,‘A’,‘404’],navigateTo方法表现形式:保留当前页面,跳转到应用内的某个页面
2.进入404页面,有个重新加载按钮,当点击了重新加载
2.1 所以把进入404页面之前,存储的页面地址拿出来
2.2 如果原先跳转到404页面之前,是调用navigateTo方法跳转,我们就可以使用uni.navigateBack可以返回到原页面,但是ni.navigateBack方法回到原页面不会触发页面的onload方法,
我们项目中有许多页面一开始是用onload方法调用接口的所以不能使用uni.navigateBack方法返回。
如果使用redirectTo方法返回原页面,假设存在这种情况,
网络一直不好,客户一直点击重新加载,那么堆栈中就是这个样子:[‘首页’,‘A’,‘A’,‘A’,‘A’,‘A’,‘A’,‘A’,‘A’…‘404’],因为redirectTo方法从404页面返回原页面,因为会删除404页面,所以404页面不会重复增加
但是A页面返回404时,会不断继续记录A页面地址因为navigateTo方法就是会记录A页面到堆栈中,所以A会不断重复。
解决这个问题的方法,要么就在A页面跳转404页面后,在404页面删除堆栈中的A页面,因为
A页面有被存储,所以我们知道要跳转哪个页面,这样就是会没有问题,但是没有操作页面栈的方法,所以这个解决方法不可取。
还有一种方法,就是把A页面跳转404页面方法换成redirectTo方法,这个方法不会把A
页面记录到堆栈中,这样一直点击重新加载,也不会重新重复的A和404页面了。
2.实现业务代码
当请求网络异常时,会进入如下操作
let pagePath = getPagePath();
let pageUrl = getPageUrl();
if (pagePath !== 'pages/common/404') {
uni.setStorageSync('redirectUrl', pageUrl);
uni.redirectTo({
url: '/pages/common/404'
});
}
进入404页面,点击重新加载,会进行如下操作
refresh() {
let pageUrl = uni.getStorageSync('redirectUrl')
if (pageUrl) {
if (this.tabBarArr.indexOf(pageUrl) === -1) {
uni.redirectTo({
url: pageUrl
})
} else {
uni.switchTab({
url: pageUrl
})
}
}
}
}