vue实现侧边菜单

使用Vue实现侧边菜单

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

基于Element UI的侧边菜单

Element UI提供了现成的侧边栏组件，可以直接使用：

<template>
  <el-container>
    <el-aside width="200px">
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>导航一</span>
          </template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-submenu>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span>导航二</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>主内容区域</el-main>
  </el-container>
</template>

<script>
export default {
  name: 'SideMenu'
}
</script>

自定义侧边菜单组件

如果需要完全自定义的侧边菜单，可以创建一个组件：

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

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, title: '首页', path: '/' },
        { id: 2, title: '关于', path: '/about' },
        { id: 3, title: '服务', path: '/services' }
      ]
    }
  }
}
</script>

<style scoped>
.sidebar {
  width: 200px;
  background-color: #f5f5f5;
  height: 100vh;
}
.menu-item {
  padding: 12px 20px;
  border-bottom: 1px solid #ddd;
}
</style>

使用Vue Router实现动态侧边菜单

结合Vue Router可以实现更灵活的侧边菜单：

<template>
  <div class="sidebar">
    <div v-for="route in filteredRoutes" :key="route.path">
      <router-link :to="route.path">{{ route.meta.title }}</router-link>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    filteredRoutes() {
      return this.$router.options.routes.filter(
        route => route.meta && route.meta.showInMenu
      )
    }
  }
}
</script>

在router配置中需要添加meta信息：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { title: '首页', showInMenu: true }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: { title: '关于', showInMenu: true }
  }
]

响应式侧边菜单

添加响应式功能，使菜单在小屏幕上可以折叠：

<template>
  <div>
    <button @click="toggleMenu">切换菜单</button>
    <div class="sidebar" :class="{ 'collapsed': isCollapsed }">
      <!-- 菜单内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false
    }
  },
  methods: {
    toggleMenu() {
      this.isCollapsed = !this.isCollapsed
    }
  }
}
</script>

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

以上方法可以根据项目需求选择使用，Element UI适合快速开发，自定义组件提供更大灵活性，结合Vue Router可以实现动态菜单，响应式设计则能适应不同屏幕尺寸。