当前位置：首页 > VUE

vue 实现侧边栏

2026-01-19 02:55:46VUE

使用 Vue 实现侧边栏

基于 Vue Router 的侧边栏导航

在 Vue 项目中，可以通过 Vue Router 结合组件化开发实现侧边栏导航。创建一个 Sidebar.vue 组件，动态渲染路由菜单：

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

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

<style>
.sidebar {
  width: 200px;
  background: #f0f0f0;
  padding: 20px;
}
.sidebar ul {
  list-style: none;
  padding: 0;
}
.sidebar li {
  margin-bottom: 10px;
}
</style>

可折叠侧边栏

通过 Vue 的响应式数据和条件渲染实现侧边栏的展开/折叠功能：

<template>
  <div class="sidebar" :class="{ 'collapsed': isCollapsed }">
    <button @click="toggleSidebar">
      {{ isCollapsed ? '展开' : '折叠' }}
    </button>
    <ul v-show="!isCollapsed">
      <li v-for="route in routes" :key="route.path">
        <router-link :to="route.path">{{ route.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false,
      routes: [
        { path: '/home', name: '首页' },
        { path: '/about', name: '关于' },
        { path: '/contact', name: '联系' }
      ]
    }
  },
  methods: {
    toggleSidebar() {
      this.isCollapsed = !this.isCollapsed
    }
  }
}
</script>

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

使用 UI 框架实现

许多 Vue UI 框架提供了现成的侧边栏组件，如 Element UI 的 el-menu：

<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 { Menu, MenuItem } from 'element-ui'
export default {
  components: {
    'el-menu': Menu,
    'el-menu-item': MenuItem
  }
}
</script>

响应式侧边栏

结合媒体查询和 Vue 的响应式数据，实现移动端友好的侧边栏：

<template>
  <div>
    <button @click="showMobileMenu = true" class="mobile-menu-button">
      菜单
    </button>
    <div class="sidebar" :class="{ 'mobile-show': showMobileMenu }">
      <button @click="showMobileMenu = false" class="close-button">
        ×
      </button>
      <ul>
        <li v-for="route in routes" :key="route.path">
          <router-link :to="route.path">{{ route.name }}</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMobileMenu: false,
      routes: [
        { path: '/home', name: '首页' },
        { path: '/about', name: '关于' },
        { path: '/contact', name: '联系' }
      ]
    }
  }
}
</script>

<style>
.sidebar {
  width: 250px;
}
.mobile-menu-button {
  display: none;
}
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: -250px;
    height: 100%;
    transition: left 0.3s;
    background: #fff;
    z-index: 100;
  }
  .sidebar.mobile-show {
    left: 0;
  }
  .mobile-menu-button {
    display: block;
  }
}
</style>

vue 实现侧边栏