“errMsg“:“navigateTo:fail Count of page jump is more then 10 times“,“errNo“:21101...

原创已于 2024-01-15 14:32:08 修改 · 747 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #uni-app #vue.js #javascript

于 2024-01-11 13:52:51 首次发布

本文分析了navigateTo页面跳转失败的原因，主要由于平台限制连续跳转次数。提供了排查和解决方法，包括避免不必要的跳转刷新，以及利用页面栈机制控制跳转。

一、问题及原因

navigateTo:fail Count of page jump is more then 10 times 释义为：navigateTo:fail页面跳转次数大于10次

navigateTo的原理是：保留当前页面，跳转到应用内的某个页面。搜索一下文档等结果不难发现，是由于各大平台在对使用navigateTo进行连续页面跳转时，限制了最大跳转保存的页面最多为10个（注意是连续用navigateTo进行跳转），一般的业务逻辑及页面嵌套是没有这么多次的。

二、排查

基于以上问题的描述，可以排查是否存在以下问题：

代码里有无哪个地方是页面数据刷新，而使用navigateTo进行跳转强制刷新数据的
用户进行连续点击时有哪个地方会连续触发navigateTo页面跳转的

找到这两个问题所在一般就能迎刃而解。

三、解决

1、页面有数据需要刷新时，非必要不用navigateTo进行页面跳转刷新，重新请求数据方法或者使用 this.$forceUpdate() 进行页面数据强制刷新即可。

this.$forceUpdate()

2、如果确实有复杂逻辑业务要进行页面跳转且不止10次时，解决方法（仅供参考）：

跳转逻辑大致为： A --> B --> C --> D
当上一级向下一级跳转的时候使用navigateTo，这样的页面会进入到页面栈。
对于返回使用的navigateBack方式，这样的会就可以叫页面出栈，就不会出现超出限制的情况了，代码如下

goBill: function (e) {
    var pages = getCurrentPages(); //当前页面
    var beforePage = pages[pages.length - 2]; //前一页
    beforePage.onLoad(); // 执行前一个页面的onLoad方法

    // 微信小程序实现
    wx.navigateBack({
        delta: 1
    })

    // uniapp实现
    uni.navigateBack({
	    delta: 1
    })
 },
 // 上述代码是通过点击页面内的按钮实现的返回跳转， 对于平时的返回，是通过小程序页面左上角的返回按钮
 // 移动端的物理返回只需要操作onUnload就好

四、结尾

以上解决方法仅为个人观点，仅供参考。

感谢观看。