uni-app 动态修改 tabBar 的核心限制是编译期静态配置，运行时无法增删 tab 或修改 iconPath/pagePath；所谓“动态”实为预置全部 tab 后通过权限拦截跳转或启用 custom tabBar 完全自定义。
uni-app 动态修改 tabbar 的核心限制
uni-app 的 tabbar 是编译期静态配置，运行时无法增删 tab 项或修改其 iconpath / pagepath。所谓“动态显示不同 tab”，本质是：在编译时预置全部可能的 tab 项，再通过条件逻辑控制「是否渲染对应页面」和「是否允许跳转」——而非真正修改 tabbar 配置对象。
用 uni.switchTab + 页面级权限拦截模拟动态切换
当用户点击某个 tab 时，不直接跳转，而是先校验权限，再决定是否放行或重定向：
- 在每个 tab 对应页面的
onLoad或onShow中调用权限检查逻辑（如读取uni.getStorageSync('userRole')） - 若无权限，立即执行
uni.switchTab({url: '/pages/home/index'})跳转到默认页，并用uni.showToast提示 - 注意：不能在
onLaunch或全局 store 初始化阶段就隐藏 tab 按钮——因为 tabBar UI 本身不可控
示例（在 /pages/order/index.vue 中）：
onShow() {
if (!this.hasPermission('order')) {
uni.switchTab({ url: '/pages/home/index' })
uni.showToast({ title: '暂无权限', icon: 'none' })
}
}
用自定义 tabBar 替代原生 tabBar 实现真动态
启用 custom: true 后，uni-app 会关闭原生 tabBar，交由你完全控制底部栏 UI 和行为，这是唯一能真正「动态增删 tab 项」的方式：
- 需在
pages.json中为每个 tab 页面设置"style": { "app-plus": { "tabBar": { "custom": true } } } - 新建一个公共组件（如
custom-tabbar.vue），用v-for渲染tabList数组，数组内容由权限动态计算得出 - 点击事件中调用
uni.switchTab，并同步更新当前选中索引（避免视觉错位） - 注意兼容性：
custom tabBar在 H5 端需额外处理 history；小程序端需手动管理 badge、图标高亮等状态
常见错误：误以为 uni.setTabBarItem 能改变 tab 结构
uni.setTabBarItem 只能修改已存在 tab 的文字、图标路径、徽标（badge），不能新增、删除或调整顺序。试图对未在 tabBar.list 中声明的 index 调用它，会静默失败或报错 tabBar item not found。
- 错误做法：在登录后调用
uni.setTabBarItem({index: 2, ...})，但pages.json里只有 2 个 tab - 正确做法：提前在
pages.json写满所有角色可能访问的 tab（比如 5 个），再用 custom tabBar 或页面拦截做显隐控制 - 性能提示：过多预置 tab 会略微增加包体积和启动时 tabBar 初始化开销，但影响极小
最易被忽略的一点：微信小程序要求 custom tabBar 的图标必须是本地绝对路径（/static/xxx.png），不能是 base64 或网络地址；而 App 端支持相对路径，这个差异容易导致某端图标不显示。
