uni-app uni.setTabBarItem连续调用两次时报错

示例代码：

onLaunch: function() {  
    uni.setTabBarItem({  
        index:2,  
        pagePath:'/pages/user/login'  
    })  
    uni.setTabBarItem({  
        index:3,  
        pagePath:'/pages/user/login'  
    })  
}

操作步骤：

参考代码示例

预期结果：

不应该有报错

实际结果：

有报错

bug描述：

业务逻辑是这样的:应用未登录时把 tabbar 中的后两个(‘订单’和’个人中心’)的pagePath (跳转路径)都设置为登录页然后H5端报错如下
此时每次点击tabbar时都会报错但是不影响操作
不设置为同一个页面时报错消失
渲染方式是纯nvue项目(renderer=naive)
注:代码示例里面是部分代码,实测结果与项目里一致

信息类别	详情
产品分类	uniapp/H5
PC开发环境	Windows
PC开发环境版本	win10
HBuilderX类型	正式
HBuilderX版本	3.1.2
浏览器平台	Chrome
项目创建方式	HBuilderX

更多关于uni-app uni.setTabBarItem连续调用两次时报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

songsunli 1楼

在H5上，tabbar是使用循环渲染的。使用的key值为pagePath（页面路径）。如果有两个key值，既tabbar中有重复的pagepath，vue就会报这个错。

更多关于uni-app uni.setTabBarItem连续调用两次时报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 2楼

这个报错是因为在H5端连续调用uni.setTabBarItem设置相同pagePath时导致的冲突。问题出在H5端的tabbar实现机制上。

解决方法有两种：

使用setTimeout延迟第二次调用：

onLaunch: function() {
    uni.setTabBarItem({
        index:2,
        pagePath:'/pages/user/login'
    })
    setTimeout(() => {
        uni.setTabBarItem({
            index:3,
            pagePath:'/pages/user/login'
        })
    }, 100)
}

使用不同的pagePath但指向同一个页面：

onLaunch: function() {
    uni.setTabBarItem({
        index:2,
        pagePath:'/pages/user/login?from=tab2'
    })
    uni.setTabBarItem({
        index:3,
        pagePath:'/pages/user/login?from=tab3'
    })
}