# uni.switchTab - 切换 TabBar 页面示例 ## 官方文档 参考官方文档:https://uniapp.dcloud.net.cn/api/router.html#switchtab ## 概述 `uni.switchTab` 用于跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。 ## 基础用法 ```javascript uni.switchTab({ url: '/pages/index/index' }) ``` ## 完整示例 ### 示例 1: 基本切换 ```javascript uni.switchTab({ url: '/pages/index/index', success: () => { console.log('切换成功') }, fail: (err) => { console.error('切换失败', err) } }) ``` ### 示例 2: 在页面中使用 ```vue ``` ### 示例 3: 登录后跳转到首页 ```javascript function login() { uni.request({ url: 'https://api.example.com/login', method: 'POST', data: { username: 'test', password: '123456' }, success: (res) => { if (res.data.success) { uni.setStorageSync('token', res.data.token) // 跳转到 tabBar 首页 uni.switchTab({ url: '/pages/index/index' }) } } }) } ``` ### 示例 4: 封装切换函数 ```javascript // utils/navigation.js const navigation = { switchToTab(url) { uni.switchTab({ url: url, fail: (err) => { console.error('切换失败', err) // 如果不是 tabBar 页面,使用 navigateTo uni.navigateTo({ url: url }) } }) } } // 使用 navigation.switchToTab('/pages/index/index') ``` ## 参数说明 | 参数名 | 类型 | 必填 | 说明 | |--------|------|------|------| | url | String | 是 | 需要跳转的 tabBar 页面的路径 | ## 平台兼容性 | 平台 | 支持情况 | |------|---------| | H5 | ✅ | | 微信小程序 | ✅ | | 支付宝小程序 | ✅ | | 百度小程序 | ✅ | | 字节跳动小程序 | ✅ | | QQ 小程序 | ✅ | | 快手小程序 | ✅ | | App | ✅ | | 快应用 | ✅ | ## 注意事项 1. 只能跳转到 `pages.json` 中配置的 tabBar 页面 2. 不能传递参数(URL 参数会被忽略) 3. 会关闭所有非 tabBar 页面 4. 如果目标页面不是 tabBar 页面,会触发 fail 回调 ## 参考资源 - **官方文档**: https://uniapp.dcloud.net.cn/api/router.html#switchtab - **页面跳转**: https://uniapp.dcloud.net.cn/api/router.html#navigateto