当前位置：首页 > VUE

vue实现左边侧边栏

2026-02-23 21:27:34VUE

实现左侧边栏的基本结构

使用Vue.js结合Vue Router和CSS可以快速构建左侧边栏。侧边栏通常包含导航菜单，并与主内容区域并列显示。

<template>
  <div class="app-container">
    <div class="sidebar">
      <nav>
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于</router-link>
        <!-- 更多导航项 -->
      </nav>
    </div>
    <div class="main-content">
      <router-view></router-view>
    </div>
  </div>
</template>

样式设计

通过CSS Flex布局或Grid布局实现侧边栏与主内容的并排排列，侧边栏固定宽度，主内容自适应剩余空间。

<style scoped>
.app-container {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 200px;
  background-color: #f0f0f0;
  padding: 20px;
}

.main-content {
  flex: 1;
  padding: 20px;
}

nav a {
  display: block;
  margin-bottom: 10px;
  color: #2c3e50;
  text-decoration: none;
}

nav a.router-link-exact-active {
  color: #42b983;
  font-weight: bold;
}
</style>

动态折叠侧边栏

添加一个按钮控制侧边栏的展开与折叠，通过Vue的响应式数据控制样式变化。

<template>
  <div class="app-container">
    <button @click="toggleSidebar">切换侧边栏</button>
    <div class="sidebar" :class="{ 'collapsed': isCollapsed }">
      <nav>
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于</router-link>
      </nav>
    </div>
    <div class="main-content">
      <router-view></router-view>
    </div>
  </div>
</template>

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

.sidebar.collapsed {
  width: 50px;
  overflow: hidden;
}

.sidebar.collapsed nav a {
  text-overflow: ellipsis;
  white-space: nowrap;
}

使用组件化拆分

将侧边栏拆分为独立组件，提高代码复用性和可维护性。

<!-- Sidebar.vue -->
<template>
  <div class="sidebar" :class="{ 'collapsed': collapsed }">
    <nav>
      <slot></slot>
    </nav>
  </div>
</template>

<script>
export default {
  props: {
    collapsed: Boolean
  }
}
</script>

<!-- App.vue -->
<template>
  <div class="app-container">
    <button @click="toggleSidebar">切换侧边栏</button>
    <Sidebar :collapsed="isCollapsed">
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
    </Sidebar>
    <div class="main-content">
      <router-view></router-view>
    </div>
  </div>
</template>

响应式设计

通过媒体查询实现移动端适配，小屏幕下侧边栏自动隐藏或改为下拉菜单。

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    height: 100%;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .sidebar.collapsed {
    transform: translateX(0);
    width: 200px;
  }
}

状态管理

对于复杂应用，可以使用Vuex或Pinia管理侧边栏的展开状态，便于跨组件访问。

vue实现左边侧边栏

// store.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    sidebarCollapsed: false
  },
  mutations: {
    toggleSidebar(state) {
      state.sidebarCollapsed = !state.sidebarCollapsed
    }
  }
})

<!-- App.vue -->
<template>
  <button @click="$store.commit('toggleSidebar')">切换侧边栏</button>
  <Sidebar :collapsed="$store.state.sidebarCollapsed" />
</template>