如何处理Vue导航栏切换时前一个标签的current属性重置问题

问题原因 #

你当前的实现依赖$route.name记录前一个标签，但点击标签触发路由跳转时，路由状态还未更新，导致prevTab获取的是旧路由名称，进而出现状态更新延迟。另外你的tabs数组最后一项存在语法错误（重复的to属性，应为id），这会导致该标签无法被正确匹配。

简洁可靠的解决方法 #

不需要维护prevTab状态，直接在切换时将所有标签的current设为false，再将当前点击的标签设为true，逻辑更清晰且无同步问题：

<script>
export default {
    data() {
        return {
            tabs: [
                { name: 'All', id: "dash.courses.all", to: 'all', current: false },
                { name: 'Self-paced Learning', id: "dash.courses.oneToOneClasses", to: 'selfPacedLearningComp', current: false },
                { name: '30 Days Challenge', id: "dash.courses.selfPacedLearningComp", to: 'thirtyDaysChallenge', current: false },
                { name: 'Group Classes', id: "dash.courses.groupClasses", to: 'groupClasses', current: false },
                // 修复语法错误：将重复的to改为id
                { name: '1-to-1 Classes', id: "dash.courses.thirtyDaysChallenge", to: 'oneToOneClasses', current: false },
            ]
        }
    },
    methods: {
        setCurrent(tabId) {
            // 遍历数组，统一设置所有标签为非激活状态，再激活当前点击的标签
            this.tabs = this.tabs.map(obj => ({
                ...obj,
                current: obj.id === tabId
            }))
        }
    },
    mounted() {
        // 初始化时激活当前路由对应的标签
        this.tabs = this.tabs.map(obj => ({
            ...obj,
            current: obj.id === this.$route.name
        }))
    }
}
</script>

关键细节说明 #

• 修复语法错误：修正最后一个标签重复的to属性，改为正确的id，确保标签能通过id正确匹配路由。
• 简化状态更新逻辑：使用map遍历数组时，直接通过obj.id === tabId判断是否激活，一次性完成所有标签的状态更新，避免维护prevTab带来的同步问题。
• 初始化逻辑统一：mounted中的初始化逻辑采用同样的简化写法，保持代码风格一致。

可选优化：路由自动同步状态 #

如果希望标签状态完全和路由同步，无需手动调用setCurrent，可以监听路由变化自动更新：

watch: {
    '$route'(to) {
        this.tabs = this.tabs.map(obj => ({
            ...obj,
            current: obj.id === to.name
        }))
    }
},
// 移除methods中的setCurrent，标签点击只需跳转路由即可（比如使用<router-link :to="tab.to">）

这样标签点击时只需要执行路由跳转，状态会自动同步，无需手动调用方法。

内容的提问来源于stack exchange，提问作者DMantas