masterLi

发布：2019-03-15 11:32
更新：2022-10-30 14:52
阅读：5654

【报Bug】uni-app 发布h5版，页面刷新后，页面栈只剩当前页面，无法使用uni.navigateBack()

分类：uni-app

详细问题描述

（DCloud产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请仔细描述你的环境和重现方式，否则DCloud很难排查解决你的问题）
[内容]

重现步骤

[步骤] 1》A页面跳转到B页面 2》B页面点击浏览器刷新按钮 3》执行某种操作后，使用uni.navigateBack()
[结果] 停留在B页面
[期望] 返回A页面
[如果语言难以表述清晰，拍一个视频或截图，有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX]
[IDE版本号]
[windows版本号]
[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序]
[运行端版本号]

App运行环境说明

[Android版本号]
[iOS版本号]
[手机型号]
[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志，点右键打开文件所在目录，将log文件压缩成zip包上传]
[App问题请提供可重现问题的代码片段，你补充的细一点，问题就解决的快一点]
[App安装包或H5地址]
[可重现代码片段]

联系方式

[QQ]

2019-03-15 11:32 负责人:无分享

11 个回复

Trust - 少说废话

页面刷新以后，路由肯定重置了呀，相当于首页就是这个页面，往哪儿退。。。
SPA 的与 MPA 的页面栈，差异点还是挺多的。

masterLi (作者)

这个有替代解决方案吗？

2019-03-15 11:36

s***@126.com

同样的问题有更好的办法吗？关注中

七分道道 - 七分道道

这个和BUG没有任何干系，uni.navigateBack()的返回路径使用的是当前页面记忆的临时信息，刷新以后这个页面已经不存在，自然也没有返回路径。

1***@qq.com

所以，最后这个问题你们如何解决

1***@qq.com

估计只能自己写一个方法记录页面栈了。

1***@qq.com

个人的解决方案：

给Vue的原型上添加$back方法；

// 弥补刷新页面导致没有页面栈记录、多级强制跳转等方案
Vue.prototype.$back = (url, force) => {
// force 参数(布尔值)：是否强制跳转，用于解决多级跳转无法返回最初页面
const len = getCurrentPages().length
if (len === 1 || force) {
uni.navigateTo({
url: url
})
return
}
uni.navigateBack({
delta: 1
})
}

d***@163.com - 这个人并不懒，但是他什么也不想留下

楼主，你问题解决了吗？

1***@qq.com - orangegame.top:9000

可以看看这个思路怎么样.

在总的基础页里加个判断,如果是第一次launch就自动跳转到首页,首页确定现在应该展示什么页面
这样用户点刷新直接等于重进应用,状态控制也省了

onLaunch里调用跳转相关api会报错,所以标志位要分成两个

base.vue

        mounted() {  
            if(global.firstLaunched){  
                setTimeout(function(){  
                    uni.reLaunch({  
                        url:"/pages/index/index"  
                    })  
                }, 10)  
                global.firstLaunched = false;  
            }  
        },

app.vue

        onLaunch: function() {  
            console.log('App Launch')  
            global.firstLaunched = true;  
        },

hhyang - 如有问题，请添加QQ1606726660 备注付费咨询

uni-simple-router完美解决你说的这个问题

f***@qq.com

back() {
// #ifdef H5
let canBack = true
const pages = getCurrentPages()
// 有可返回的页面则直接返回，uni.navigateBack默认返回失败之后会自动刷新页面，无法继续返回
if (pages.length > 1) {
uni.navigateBack(1)
return;
}
// vue router 可以返回uni.navigateBack失败的页面但是会重新加载
let a = this.$router.go(-1)
// router.go失败之后则重定向到首页
if (a == undefined) {
uni.reLaunch({
url: "/pages/tabbar/index"
})
}
return;
// #endif
uni.navigateBack(1)
},

m***@qq.com

仅供参考 :)

// 跳转回上一页  
        $navBack() {  
            const routes = getCurrentPages(); // 获取当前打开过的页面路由数组  
            const routesLen = routes.length;  
            if (routesLen > 1) {  
                uni.navigateBack({  
                    delta: 1  
                });  
            } else {  
                // 在H5端开发时改动代码触发刷新/手动刷新当前页面后, routesLen = 1, 若直接用uni.navigateBack()会反复刷新当前页, 这种情况可直接跳转至首页  
                uni.switchTab({  
                    url: '/pages/index/index'  
                });  
            }  
        },

要回复问题请先登录或注册

【报Bug】uni-app 发布h5版，页面刷新后，页面栈只剩当前页面，无法使用uni.navigateBack()

详细问题描述

重现步骤

IDE运行环境说明

uni-app运行环境说明

App运行环境说明

附件

联系方式

11 个回复

uni-simple-router完美解决你说的这个问题

公告

相关问题

【报Bug】uni-app 发布h5版，页面刷新后，页面栈只剩当前页面，无法使用uni.navigateBack()

详细问题描述

重现步骤

IDE运行环境说明

uni-app运行环境说明

App运行环境说明

附件

联系方式

与内容相关的链接

11 个回复

uni-simple-router完美解决你说的这个问题

公告

相关问题