Vue.js 导航菜单独立选中状态实现指南

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

data() {
    return {
        isActive: false, // 单一的激活状态变量
    }
},
methods: {
    activeMe() {
        this.isActive = !this.isActive; // 切换这个单一变量
    },
}

data() {
    return {
        menuList: [{
                to: "/",
                label: "首页",
                active: true, // 初始时可设置一个默认激活项
            },
            {
                to: "/translation-services",
                label: "翻译服务",
                active: false,
            },
            {
                to: "/translation-tariffs",
                label: "翻译资费",
                active: false,
            },
            // ... 更多菜单项
        ],
    };
},

methods: {
    deselectAll() {
        this.menuList.forEach(item => {
            item.active = false;
        });
    },
    // 或者直接在模板中处理，如示例所示
},

<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.stop="handleMenuItemClick(item)"
        :class="{ 'list-border': item.active }"
      >
        <router-link class="link" :to="item.to">{{ item.label }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
// 如果您使用的是Vue 2，并且RouterLink不是全局可用的，可能需要导入
// import { RouterLink } from 'vue-router'; // Vue 3 Composition API 风格

export default {
  name: 'IndependentNavMenu',
  // components: { RouterLink }, // 如果需要局部注册

  data() {
    return {
      menuList: [
        {
          to: "/",
          label: "首页",
          active: true, // 默认激活首页
        },
        {
          to: "/translation-services",
          label: "翻译服务",
          active: false,
        },
        {
          to: "/translation-tariffs",
          label: "翻译资费",
          active: false,
        },
        {
          to: "/about-us",
          label: "关于我们",
          active: false,
        },
      ],
    };
  },
  methods: {
    handleMenuItemClick(clickedItem) {
      // 1. 取消所有菜单项的激活状态
      this.menuList.forEach(item => {
        item.active = false;
      });
      // 2. 激活当前点击的菜单项
      clickedItem.active = true;
    },
    // 如果希望点击已激活项时取消激活，可以修改为：
    // handleMenuItemClick(clickedItem) {
    //   this.menuList.forEach(item => {
    //     if (item !== clickedItem) { // 只取消其他项的激活状态
    //       item.active = false;
    //     }
    //   });
    //   clickedItem.active = !clickedItem.active; // 切换当前项的状态
    // },
  },
  // 可选：在路由切换时更新菜单激活状态
  watch: {
    '$route'(to) {
      this.menuList.forEach(item => {
        item.active = (item.to === to.path);
      });
    }
  },
  // 可选：组件创建时根据当前路由设置初始激活状态
  created() {
    if (this.$route) {
      this.menuList.forEach(item => {
        item.active = (item.to === this.$route.path);
      });
    }
  }
};
</script>

<style scoped>
/* 基础样式 */
.main-nav {
  background-color: #333;
  color: white;
  padding: 10px 20px;
  justify-content: space-between;
  align-items: center;
}

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

.main-ul li {
  margin: 0 15px;
  cursor: pointer;
  padding-bottom: 5px; /* 为边框留出空间 */
}

.main-ul li .link {
  color: white;
  text-decoration: none;
  font-size: 1.1em;
  padding: 5px 0;
  display: block; /* 确保链接占据li的全部宽度 */
}

/* 激活状态样式 */
.list-border {
  border-bottom: 4px solid #42b983 !important; /* 示例颜色 */
}

/* 移除 router-link 默认的激活样式，如果需要自定义 */
.router-link-active {
  /* text-decoration: underline; */
}
</style>