侧边菜单vue实现

侧边菜单的 Vue 实现方法

在 Vue 中实现侧边菜单可以通过多种方式完成，以下是几种常见的实现方法。

使用 Vue Router 和动态路由

通过 Vue Router 实现侧边菜单，结合动态路由生成菜单项：

<template>
  <div class="sidebar">
    <ul>
      <li v-for="item in menuItems" :key="item.path">
        <router-link :to="item.path">{{ item.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { path: '/home', title: '首页' },
        { path: '/about', title: '关于' },
        { path: '/contact', title: '联系我们' }
      ]
    }
  }
}
</script>

<style>
.sidebar {
  width: 200px;
  background: #f0f0f0;
  height: 100vh;
}
</style>

使用第三方 UI 库

许多流行的 Vue UI 库提供了现成的侧边菜单组件，如 Element UI、Ant Design Vue 等：

<template>
  <el-menu
    default-active="1"
    class="el-menu-vertical"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-menu-item index="1">
      <i class="el-icon-menu"></i>
      <span>首页</span>
    </el-menu-item>
    <el-menu-item index="2">
      <i class="el-icon-document"></i>
      <span>文档</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
import { ElMenu, ElMenuItem } from 'element-plus'

export default {
  components: {
    ElMenu,
    ElMenuItem
  }
}
</script>

可折叠的侧边菜单

实现一个可折叠的侧边菜单，添加展开/收起功能：

<template>
  <div class="sidebar" :class="{ 'collapsed': isCollapsed }">
    <button @click="toggleCollapse">
      {{ isCollapsed ? '展开' : '收起' }}
    </button>
    <ul>
      <li v-for="item in menuItems" :key="item.path">
        <router-link :to="item.path">
          <i :class="item.icon"></i>
          <span v-if="!isCollapsed">{{ item.title }}</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false,
      menuItems: [
        { path: '/home', title: '首页', icon: 'fa fa-home' },
        { path: '/about', title: '关于', icon: 'fa fa-info' }
      ]
    }
  },
  methods: {
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed
    }
  }
}
</script>

<style>
.sidebar {
  width: 200px;
  transition: width 0.3s;
}
.sidebar.collapsed {
  width: 60px;
}
</style>

响应式侧边菜单

实现一个响应式的侧边菜单，在小屏幕设备上自动隐藏：

<template>
  <div>
    <button @click="toggleMenu" class="menu-toggle">菜单</button>
    <div class="sidebar" :class="{ 'active': isMenuActive }">
      <ul>
        <li v-for="item in menuItems" :key="item.path">
          <router-link :to="item.path">{{ item.title }}</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMenuActive: false,
      menuItems: [
        { path: '/home', title: '首页' },
        { path: '/about', title: '关于' }
      ]
    }
  },
  methods: {
    toggleMenu() {
      this.isMenuActive = !this.isMenuActive
    }
  }
}
</script>

<style>
.menu-toggle {
  display: none;
}
.sidebar {
  width: 250px;
}
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  .sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    background: #fff;
    z-index: 1000;
  }
  .sidebar.active {
    display: block;
  }
}
</style>

嵌套菜单实现

对于多级菜单，可以使用递归组件实现：

<template>
  <div class="sidebar">
    <ul>
      <li v-for="item in menuItems" :key="item.path">
        <template v-if="item.children">
          <div @click="toggleSubMenu(item)">
            {{ item.title }}
            <span>{{ item.isOpen ? '-' : '+' }}</span>
          </div>
          <ul v-show="item.isOpen">
            <li v-for="child in item.children" :key="child.path">
              <router-link :to="child.path">{{ child.title }}</router-link>
            </li>
          </ul>
        </template>
        <template v-else>
          <router-link :to="item.path">{{ item.title }}</router-link>
        </template>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        {
          title: '产品',
          isOpen: false,
          children: [
            { path: '/product/a', title: '产品A' },
            { path: '/product/b', title: '产品B' }
          ]
        },
        { path: '/about', title: '关于' }
      ]
    }
  },
  methods: {
    toggleSubMenu(item) {
      item.isOpen = !item.isOpen
    }
  }
}
</script>

以上方法提供了从基础到高级的侧边菜单实现方案，可以根据项目需求选择合适的实现方式。