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
})
}
}
}
}
|