解决方案：数据驱动的独立状态管理

要实现菜单项的独立选中状态，核心思想是为每个菜单项维护其独立的激活状态。这可以通过将菜单项数据结构化为一个数组，并在每个数组对象中包含一个独立的 active 属性来实现。

1. 定义菜单项数据结构

首先，在 Vue 组件的 data 选项中定义一个 menuList 数组。数组中的每个对象代表一个菜单项，至少包含 label（显示文本）、to（路由路径）和 active（当前项的激活状态）属性。

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

2. 使用 v-for 渲染菜单列表

利用 v-for 指令遍历 menuList 数组来渲染每个

3. 实现点击事件逻辑

当用户点击某个菜单项时，我们需要执行以下操作：

1. 取消所有菜单项的激活状态：遍历 menuList 数组，将所有 item.active 设置为 false。
2. 激活当前点击的菜单项：将当前点击项的 item.active 状态设置为 true（如果需要切换，则设置为 !item.active）。

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

4. 动态绑定激活样式

使用 :class 绑定语法，根据每个菜单项自身的 item.active 状态动态添加或移除 list-border 样式。

完整代码示例

下面是一个包含模板、脚本和样式的完整 Vue.js 组件示例，展示了如何实现导航菜单的独立选中状态：

<template>
  <n* class="n* n*bar-expand-lg main-n* 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>
  </n*>
</template>

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

export default {
  name: 'IndependentN*Menu',
  // 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-n* {
  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>

注意事项与最佳实践

1. key 属性的重要性：在 v-for 循环中，始终为每个列表项提供一个唯一的 key。这有助于 Vue 更高效地更新虚拟 DOM，尤其是在列表项顺序改变或被删除时。
2. 状态管理的粒度：当处理列表中的独立元素状态时，为每个元素在数据模型中维护一个独立的状态属性（如 active）是关键。避免使用单一的全局状态变量来控制多个独立元素的行为。
3. 与 Vue Router 的集成：上述示例中的 watch 和 created 钩子展示了如何将自定义的激活状态与 Vue Router 的当前路由同步。当用户通过浏览器前进/后退或直接输入URL时，确保菜单的激活状态依然正确。Vue Router 自身也提供了 router-link-active 和 router-link-exact-active 类，可以直接用于样式，但如果需要更复杂的自定义逻辑或非路由相关的激活状态，则上述方法更为灵活。
4. 可访问性：考虑为导航菜单添加适当的 ARIA 属性，以提高可访问性。例如，当一个菜单项被激活时，可以添加 aria-current="page" 属性。

总结

通过采用数据驱动的方法，为每个菜单项维护独立的激活状态，并结合 v-for 循环和条件类绑定，我们可以轻松实现 Vue.js 导航菜单的独立选中功能。这种模式不仅解决了多个菜单项同步激活的问题，也使得组件的状态管理更加清晰和可维护。理解并应用这种思想，对于构建响应式且用户友好的 Vue.js 界面至关重要。