Vue.js 导航菜单项独立激活状态管理教程

<li @click="activeMe" :class="[isActive ? 'list-border' : '']">
    <router-link class="link" to="/tranlsation-services">
        服务翻译
    </router-link>
</li>
<li @click="activeMe" :class="[isActive ? 'list-border' : '']">
    <router-link class="link" to="/translation-tariffs">
        翻译资费
    </router-link>
</li>

登录后复制

以及对应的 activeMe 方法：

data() {
    return {
        isActive: false, // 这是一个全局状态
    }
},
methods: {
    activeMe() {
        if (!this.isActive) {
            this.isActive = !this.isActive
        }
    },
}

登录后复制

这里的问题在于，isActive 是一个单一的布尔值，它代表了“是否有任何菜单项被激活”的全局状态，而不是“某个特定的菜单项是否被激活”的独立状态。因此，当 activeMe 方法被调用并改变 isActive 的值时，所有绑定到 isActive 的

立即学习“前端免费学习笔记（深入）”；

要实现独立激活，每个菜单项都需要拥有自己的激活状态。

解决方案：基于对象数组的独立状态管理

解决此问题的核心思想是为每个导航菜单项维护一个独立的激活状态。最 Vue-idiomatic 的方法是使用一个包含对象的数据数组，每个对象代表一个菜单项，并拥有自己的 active 属性。

1. 定义数据结构

首先，在 data() 选项中定义一个 menuList 数组。数组中的每个对象应包含至少以下属性：

• to: 对应 router-link 的路径。
• label: 菜单项显示的文本。
• active: 一个布尔值，表示该菜单项是否被激活，默认为 false。

data() {
    return {
        menuList: [
            { to: "/", label: "首页", active: false },
            { to: "/tranlsation-services", label: "服务翻译", active: false },
            { to: "/translation-tariffs", label: "翻译资费", active: false },
            // ...更多菜单项
        ],
    };
},

登录后复制

2. 渲染列表与绑定状态

使用 v-for 指令遍历 menuList 数组来渲染菜单项。通过 :key 绑定每个项的唯一标识（这里可以直接使用 item 对象本身，但在实际项目中推荐使用一个唯一的 ID），并使用 :class 动态绑定 list-border 样式，根据 item.active 的值来决定是否应用该样式。

标签： vue js vue.js 浏览器 事件冒泡 vue-router ai 路由 常见问题 点击事件