vue2 动态菜单component

在Vue 2中创建动态菜单组件通常涉及到组件化和数据驱动的设计。你可以使用`v-for`指令遍历数据源，根据每个数据项的状态或属性来渲染不同的菜单项。下面是一个简单的例子：

<template>
  <ul class="dynamic-menu">
    <li v-for="(item, index) in menuItems" :key="index">
      <router-link :to="item.path" :class="{ active: isActive(item)}">
        {{ item.name }}
      </router-link>
      <!-- 可能还有子菜单 -->
      <ul v-if="item.subItems && item.subItems.length > 0">
        <li v-for="subItem in item.subItems">
          <router-link :to="subItem.path">{{ subItem.name }}</router-link>
        </li>
      </ul>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        // 根据你的应用配置的数据结构填充
        { name: '首页', path: '/', isActive: () => this.$route.path === '/' },
        { name: '关于我们', path: '/about', isActive: () => this.$route.path === '/about' }
        // 更多菜单项...
      ]
    };
  },
  methods: {
    isActive(item) {
      return this.$route.path === item.path;
    }
  }
};
</script>

在这个例子中，`menuItems`数组包含了菜单项的名称、路径以及一个自定义的`isActive`函数，用于判断当前路由是否激活该菜单项。当路由变化时，`isActive`会被自动调用更新状态。