Vue 如何实现动态菜单功能？一看就会！

Vue 实现动态菜单功能通常会利用组件化思想和数据绑定特性。以下是简单的步骤：

1. **组件设计**：
创建一个 `MenuItem` 组件，它包含一个 `v-if` 或者 `v-show` 来控制显示与否，以及属性如 `isActive` 来标识当前选中状态。

<template>
  <li :class="{ active: isActive }">
    <router-link v-if="to" :to="{ path: to.path }">{{ item.name }}</router-link>
    <span v-else>{{ item.name }}</span>
  </li>
</template>

<script>
export default {
  props: ['item', 'isActive'],
};
</script>

2. **数据管理**：
在父组件（通常是 App 或 Layout 组件）中，维护一个数组来表示菜单项，并监听某个状态变化来更新菜单的激活状态。

data() {
  return {
    menuItems: [
      { name: '首页', to: '/home' },
      { name: '设置', to: '/settings' },
    ],
    selectedItem: '',
  };
},
methods: {
  toggleItem(item) {
    this.selectedItem = item ? item : '';
    this.menuItems.forEach((itm) => itm.isActive = itm === this.selectedItem);
  },
},

3. **初始化状态**：
在 `mounted()` 生命周期钩子中，你可以默认选择第一个菜单项，或者通过其他途径设置初始选中项。

4. **触发事件**：
可以给每个菜单项添加点击事件，将当前点击的菜单项传递给父组件的 `toggleItem` 方法。

<menu-item v-for="(item, index) in menuItems" :key="index" :item="item" @click="toggleItem(item)" />