当前位置：首页 > VUE

vue实现menu

2026-01-07 23:17:09VUE

Vue 实现 Menu 的方法

使用 Element UI 的 Menu 组件

Element UI 提供了现成的 Menu 组件，适合快速实现导航菜单。安装 Element UI 后，可以直接使用 el-menu 组件。

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-menu-item index="1">首页</el-menu-item>
    <el-submenu index="2">
      <template #title>产品</template>
      <el-menu-item index="2-1">产品1</el-menu-item>
      <el-menu-item index="2-2">产品2</el-menu-item>
    </el-submenu>
    <el-menu-item index="3">关于我们</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

自定义实现 Menu

如果需要完全自定义的菜单，可以通过 Vue 的动态组件和递归组件实现。

<template>
  <ul class="menu">
    <li v-for="item in menuItems" :key="item.id">
      <a :href="item.url">{{ item.title }}</a>
      <ul v-if="item.children" class="submenu">
        <li v-for="child in item.children" :key="child.id">
          <a :href="child.url">{{ child.title }}</a>
        </li>
      </ul>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        {
          id: 1,
          title: '首页',
          url: '/'
        },
        {
          id: 2,
          title: '产品',
          url: '#',
          children: [
            {
              id: 21,
              title: '产品1',
              url: '/product1'
            },
            {
              id: 22,
              title: '产品2',
              url: '/product2'
            }
          ]
        }
      ]
    };
  }
};
</script>

<style>
.menu {
  list-style: none;
  padding: 0;
}
.submenu {
  padding-left: 20px;
}
</style>

使用 Vue Router 实现路由菜单

结合 Vue Router 可以实现基于路由的菜单导航，适合单页应用（SPA）。

<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/products">产品</router-link>
    <router-link to="/about">关于我们</router-link>
  </nav>
</template>

<script>
export default {
  name: 'NavMenu'
};
</script>

<style>
nav a {
  margin-right: 10px;
  text-decoration: none;
  color: #333;
}
nav a.router-link-exact-active {
  color: #42b983;
}
</style>

递归组件实现多级菜单

对于复杂的多级菜单，可以使用递归组件动态渲染。

<template>
  <ul>
    <MenuItem
      v-for="item in menuData"
      :key="item.id"
      :item="item"
    />
  </ul>
</template>

<script>
import MenuItem from './MenuItem.vue';

export default {
  components: { MenuItem },
  data() {
    return {
      menuData: [
        {
          id: 1,
          title: '首页',
          children: []
        },
        {
          id: 2,
          title: '产品',
          children: [
            {
              id: 21,
              title: '产品1',
              children: []
            }
          ]
        }
      ]
    };
  }
};
</script>

<!-- MenuItem.vue -->
<template>
  <li>
    {{ item.title }}
    <ul v-if="item.children && item.children.length">
      <MenuItem
        v-for="child in item.children"
        :key="child.id"
        :item="child"
      />
    </ul>
  </li>
</template>

<script>
export default {
  name: 'MenuItem',
  props: {
    item: {
      type: Object,
      required: true
    }
  }
};
</script>

以上方法可以根据具体需求选择使用，Element UI 适合快速开发，自定义实现则更加灵活。

vue实现menu