uni-app vue3版本下，底部标签切换失败

uni-app vue3版本下，底部标签切换失败

属性 值
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.3.9
手机系统 Android
手机系统版本号 Android 12
手机厂商 华为
手机机型 开发工具
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

bug描述：

在hubilderx下，右侧预览页面会出现如下问题

uni.setTabBarItem({
index: index,
pagePath: url,
fail(data) {
console.log(data)
},
complete(data) {
uni.switchTab({
url: url,
fail(data) {
console.log(data)
}
})
}
})

vue2版本没有问题
vue3版本 调用出错 {“errMsg”:“switchTab:fail can not switch to no-tabBar page”}

示例代码：

uni.setTabBarItem({
index: index,
pagePath: url,
fail(data) {
console.log(data)
},
complete(data) {
uni.switchTab({
url: url,
fail(data) {
console.log(data)
}
})
}
})

操作步骤：

uni.setTabBarItem({
index: index,
pagePath: url,
fail(data) {
console.log(data)
},
complete(data) {
uni.switchTab({
url: url,
fail(data) {
console.log(data)
}
})
}
})

更多关于uni-app vue3版本下，底部标签切换失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html

17 回复

请提供简单可复现的完整示例（上传附件），方便我们快速排查问题哦。 【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

更多关于uni-app vue3版本下，底部标签切换失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已上传

@DCloud_UNI_Anne 附件

问题复现，已记录后续优化，已加分，感谢您的反馈！

我自己顶一下

我帮你顶一下

按理说这么简单的一个api，不应该出错啊，终究还是国产啊。。。

解决了吗?

还没

顶一下！

我的vue3版本也是这样的错误，请问现在解决了吗？

还没，目前现象是，在vue3模式下，只要用setTabBarItem这个方法设置了pagePath 参数，switchTab 标签切换就会提示失败。

最新的Alpha版本已修复

2024了还是没有解决啊

24遇到一样问题了 = =

25年了，问题依旧存在 @DCloud_UNI_FXY

uni-app: 3.0.0-alpha-4010920240607001 版本可自行添加代码修复。
我的问题是只有在打包H5页面会有这个问题，不知道和我是否一样。
修复代码如下：
window?.__uniRoutes.forEach((item: { path: string; meta: { isTabBar: boolean } }) => {
const url = item.path;
// ucMenu 是tabbar实际要展示的menu
const index = ucMenu.findIndex((i) => /${i.path} === url);
// 如果是实际要展示的menu，就设置isTabbar为true，否则为false
item.meta.isTabBar = index > -1;
}); 根本原因就是switchTab的时候会判断，__uniRoutes里面对应跳转的路由的meta.isTabBar是否为true， 如果为true才可进行跳转，否则就会报错。
其他版本需要检查是否只有在H5环境有问题，然后window下面是否有__uniRoutes。

回到顶部