vue2动态渲染菜单

Vue.js 2.x 中，动态渲染菜单通常通过组件化和数据驱动的方式来实现。你可以创建一个 Menu 组件，然后在父组件中管理菜单的状态和内容。以下是简单的步骤：

1. **数据结构**：定义一个对象数组，每个对象代表一个菜单项，包含标题、链接或路由路径以及是否激活状态（例如 `isActive`）。

data() {
  return {
    menus: [
      { name: 'Home', path: '/', isActive: false },
      { name: 'About', path: '/about', isActive: false },
      // 更多菜单项...
    ]
  };
}

2. **模板**：在 Vue 模板中遍历这个数据数组，用 v-for 来渲染每一项菜单。

<template>
  <ul class="menu">
    <li v-for="(item, index) in menus" :key="index">
      <router-link :to="item.path"
        :class="{ active: item.isActive }"
        @click.prevent="toggleActive(index)">
        {{ item.name }}
      </router-link>
    </li>
  </ul>
</template>

这里使用了 Vue Router 的 `<router-link>` 标签，并设置了 `active` 类名基于 `isActive` 属性。

3. **方法**：定义一个 `toggleActive` 方法来切换当前选中菜单的状态。

methods: {
  toggleActive(index) {
    this.menus.forEach((item, i) => {
      if (i === index) {
        item.isActive = !item.isActive;
      } else {
        item.isActive = false;
      }
    });
  }
}

4. **路由守卫**：如果你需要在路由变化时更新菜单状态，可以考虑使用 beforeEach 路由守卫。

5. **父子组件通信**：如果菜单项依赖于某个外部状态，可以在父组件和子组件间通过 props 和事件来进行数据传递。