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>

// 脚本片段
data() {
    return {
        isActive: false, // 单一的激活状态变量
    }
},
methods: {
    activeMe() {
        // 每次点击都切换这个共享的 isActive 变量
        this.isActive = !this.isActive;
    },
},

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

<ul class="my-auto mx-auto main-ul">
    <li v-for="item in menuList" :key="item.to" @click="handleMenuItemClick(item)" :class="{ 'list-border': item.active }">
        <router-link class="link" :to="item.to">
            {{ item.label }}
        </router-link>
    </li>
</ul>

methods: {
    // 取消所有菜单项的激活状态
    deselectAll() {
        this.menuList.forEach(item => {
            item.active = false;
        });
    },
    // 处理菜单项点击事件
    handleMenuItemClick(clickedItem) {
        this.deselectAll(); // 首先取消所有项的激活状态
        clickedItem.active = true; // 然后激活被点击的项
    },
},

<template>
  <nav class="nav navbar-expand-lg main-nav d-flex">
    <h1 class="text-center fs-2">导航标题</h1>
    <ul class="my-auto mx-auto main-ul">
      <li
        v-for="item in menuList"
        :key="item.to"
        @click="handleMenuItemClick(item)"
        :class="{ 'list-border': item.active }"
      >
        <router-link class="link" :to="item.to">{{ item.label }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
import { RouterLink } from 'vue-router'; // 假设你正在使用 Vue Router

export default {
  name: "NavBar",
  components: {
    RouterLink,
  },
  data() {
    return {
      menuList: [
        {
          to: "/",
          label: "首页",
          active: false,
        },
        {
          to: "/tranlsation-services",
          label: "服务",
          active: false,
        },
        {
          to: "/translation-tariffs",
          label: "价格",
          active: false,
        },
        {
          to: "/about",
          label: "关于我们",
          active: false,
        },
      ],
    };
  },
  methods: {
    // 取消所有菜单项的激活状态
    deselectAll() {
      this.menuList.forEach(item => {
        item.active = false;
      });
    },
    // 处理菜单项点击事件
    handleMenuItemClick(clickedItem) {
      this.deselectAll(); // 首先取消所有项的激活状态
      clickedItem.active = true; // 然后激活被点击的项
    },
  },
  // 可以根据需要添加 created 或 mounted 钩子来设置初始激活项
  created() {
    // 示例：在组件创建时根据当前路由设置初始激活项
    const currentPath = this.$route ? this.$route.path : '/'; // 确保 $route 存在
    const activeItem = this.menuList.find(item => item.to === currentPath);
    if (activeItem) {
      this.handleMenuItemClick(activeItem);
    } else if (this.menuList.length > 0) {
      // 如果没有匹配项，默认激活第一个
      this.handleMenuItemClick(this.menuList[0]);
    }
  }
};
</script>

<style scoped>
.main-nav {
  /* 样式根据你的设计调整 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 10px 20px;
  color: white;
}

.main-ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

li {
  margin: 0 15px;
  cursor: pointer;
  padding: 5px 0;
  transition: border-bottom 0.3s ease;
}

.link {
  color: white;
  text-decoration: none;
  font-size: 1.1em;
}

.list-border {
  border-bottom: 4px solid white !important; /* 激活样式 */
}

/* 其他样式... */
</style>