当前位置：首页 > VUE

vue 实现菜单栏

2026-01-20 04:55:11VUE

实现基础菜单栏结构

使用 Vue 的模板语法构建菜单栏的 HTML 结构，通常包含 <ul> 和 <li> 标签。通过 v-for 动态渲染菜单项，数据可存储在组件的 data 属性中。

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

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, title: "首页", link: "/" },
        { id: 2, title: "产品", link: "/products" },
        { id: 3, title: "关于", link: "/about" }
      ]
    };
  }
};
</script>

添加交互功能

通过 Vue 的事件绑定和状态管理实现菜单交互，如高亮当前选中项或展开子菜单。

<template>
  <ul class="menu">
    <li 
      v-for="item in menuItems" 
      :key="item.id"
      :class="{ 'active': activeItem === item.id }"
      @click="setActive(item.id)"
    >
      <a :href="item.link">{{ item.title }}</a>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      activeItem: 1,
      menuItems: [
        { id: 1, title: "首页", link: "/" },
        { id: 2, title: "产品", link: "/products" },
        { id: 3, title: "关于", link: "/about" }
      ]
    };
  },
  methods: {
    setActive(id) {
      this.activeItem = id;
    }
  }
};
</script>

支持嵌套子菜单

通过递归组件或嵌套 v-for 实现多级菜单。子菜单数据可包含 children 字段，并通过条件渲染控制显示。

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

<script>
export default {
  data() {
    return {
      menuItems: [
        { 
          id: 1, 
          title: "首页", 
          link: "/",
          children: [
            { id: 4, title: "子页1", link: "/sub1" }
          ]
        }
      ]
    };
  }
};
</script>

使用 Vue Router 集成

若项目使用 Vue Router，可将菜单项与路由配置关联，通过 router-link 替代 <a> 标签，实现无缝导航。

<template>
  <ul class="menu">
    <li 
      v-for="item in menuItems" 
      :key="item.path"
      :class="{ 'active': $route.path === item.path }"
    >
      <router-link :to="item.path">{{ item.title }}</router-link>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { path: "/", title: "首页" },
        { path: "/products", title: "产品" }
      ]
    };
  }
};
</script>

响应式设计

通过 CSS 媒体查询或 Vue 的响应式数据（如监听窗口宽度）实现移动端折叠菜单。结合 v-show 或 v-if 控制菜单的显示状态。

<template>
  <button @click="toggleMenu">菜单</button>
  <ul class="menu" v-show="isMenuVisible">
    <li v-for="item in menuItems" :key="item.id">
      <a :href="item.link">{{ item.title }}</a>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      isMenuVisible: false,
      menuItems: [/* ... */]
    };
  },
  methods: {
    toggleMenu() {
      this.isMenuVisible = !this.isMenuVisible;
    }
  }
};
</script>

样式优化

使用 CSS 或 SCSS 美化菜单栏，如添加过渡动画、悬浮效果等。建议采用 BEM 命名规范保持样式可维护性。

.menu {
  display: flex;
  gap: 20px;
  list-style: none;
}
.menu li a {
  text-decoration: none;
  color: #333;
}
.menu li.active a {
  color: #42b983;
  font-weight: bold;
}
.submenu {
  padding-left: 20px;
}

vue 实现菜单栏