diff --git a/components/tabbar/tabbar.vue b/components/tabbar/tabbar.vue index 1f9f3aa..a72a431 100644 --- a/components/tabbar/tabbar.vue +++ b/components/tabbar/tabbar.vue @@ -69,8 +69,34 @@ export default { }; }, computed: { - // 从 Vuex 获取全局高亮索引 - ...mapState(['currentTabIndex', 'messageNum']) + // 保留对消息数量的映射 + ...mapState(['messageNum']), + + // ========= 动态计算当前高亮索引 ========= + // 替代原先直接获取 Vuex 的方式,改为根据当前真实路由计算,解决刷新状态丢失问题 + currentTabIndex() { + try { + // 获取当前页面栈 + const pages = getCurrentPages(); + if (pages && pages.length > 0) { + // 获取当前页面实例 + const currentPage = pages[pages.length - 1]; + // 拼接当前页面路径(兼容不同平台获取路由的方式) + const currentPath = '/' + (currentPage.route || currentPage.__route__); + + // 在 tabbarList 中查找匹配当前路径的索引 + const index = this.tabbarList.findIndex(item => item.pagePath === currentPath); + if (index !== -1) { + return index; + } + } + // 如果由于某些原因匹配不到,降级去取 Vuex 中的值(防止其他极端情况报错) + return this.$store.state.currentTabIndex || 0; + } catch (e) { + return this.$store.state.currentTabIndex || 0; + } + } + // ================================================= }, watch: { // 当 tabbarList 内容变化(如异步更新图标)时,强制重建组件 @@ -153,7 +179,7 @@ export default { const idx = parseInt(index, 10); if (isNaN(idx) || !this.tabbarList[idx]) return; - // 先更新全局高亮(立即生效) + // 依然更新全局高亮,确保其他可能依赖 Vuex 状态的逻辑正常运行 this.setCurrentTabIndex(idx); // 跳转页面