问题描述:H5在UC浏览器上(用手机才能看出效果)不能依次回退上一个页面,我初始页跳到第二层然后跳到第三层点击返回直接回退到初始页。使用框架原生的头顶导航栏和自定义顶部导航栏(原生的跳转方式或引入uni-simple-router)都会有此问题。初始页跳转关闭之前页面后面存在就是点返回没效果。感觉应该是UC浏览器的问题,不会使用你的页面栈,也不会存储。
百度了很久发现几个也遇到类似的问题,但是都没解决,下面两篇文章
1.H5在UC浏览器上,使用浏览器回退和物理按键后退,使用window.history.go(-1),返回上一级,页面不能依次返回 文章地址
2.vue移动端,在uc浏览器中this.$router.go(-1)会出现后退错误文章地址
最终解决方法
实在没有找到好的解决办法,最后只能在每次跳转的时候去存储当前的页面路径到一个list中(检测当前是否是UC浏览器才进行操作)
1.App.vue中的onLaunch方法里
//获取当前游览器信息
var uc = navigator.userAgent;
//判断是否是UC浏览器
if (uc.indexOf('UCBrowser') !== -1) {
const list = ['navigateTo', 'redirectTo', 'reLaunch', 'switchTab']
// 用遍历的方式分别为,uni.navigateTo,uni.redirectTo,uni.reLaunch,uni.switchTab这4个路由方法添加拦截器
list.forEach(item => {
uni.addInterceptor(item, {
invoke(e) {
if (uni.getStorageSync("arrList")) {
arrList = uni.getStorageSync("arrList")
}
// 获取要跳转的页面路径(url去掉"?"和"?"后的参数)
const url = e.url.split('?')[0]
//跳转时当前路径存储到arrList中
if(arrList==''){
arrList.push(url)
}else{
let fleg=arrList.some(item=>{
return item==url
})
if(!fleg){
arrList.push(url)
}
}
uni.setStorageSync("arrList", arrList)
return e
},
fail(err) { // 失败回调拦截
console.log(err)
}
})
})
}
2.在自定义顶部导航栏组件页面中
// 点击左侧区域
leftClick() {
//获取浏览器信息
var isUc = navigator.userAgent;
//判断是否是UC浏览器
if (isUc.indexOf('UCBrowser') !== -1) {
//每次返回在list中删除当前的页面路径
let arr = uni.getStorageSync("arrList")
if(arr.length>1){
uni.reLaunch({
url:arr[arr.length - 2]
})
arr.splice(arr.length-1,1)
uni.setStorageSync("arrList",arr)
}
}else{
// 如果配置了autoBack,自动返回上一页
this.$emit('leftClick')
if (this.autoBack) {
//获取页面栈的
const canNavBack = getCurrentPages()
//判断游览器是否刷新导致的页面栈消失
if (canNavBack && canNavBack.length > 1) {
uni.navigateBack({
delta: 1
})
} else {
//游览器刷新了,就使用历史跳转
history.back()
}
}
}
},