当前位置：首页 > VUE

vue实现左侧导航

2026-02-17 23:19:01VUE

Vue 实现左侧导航

使用 Element UI 的 Menu 组件

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-submenu index="1">
      <template #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>
</template>

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

<style>
.el-menu-vertical {
  height: 100vh;
}
</style>

使用 Vue Router 实现导航跳转

结合 Vue Router，可以为导航菜单添加路由功能：

<template>
  <el-menu
    :router="true"
    default-active="/"
    class="el-menu-vertical"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-menu-item index="/">
      <i class="el-icon-house"></i>
      <span>首页</span>
    </el-menu-item>
    <el-menu-item index="/about">
      <i class="el-icon-document"></i>
      <span>关于</span>
    </el-menu-item>
  </el-menu>
</template>

自定义导航组件

如果需要完全自定义导航，可以使用 Vue 的动态组件和样式：

<template>
  <div class="sidebar">
    <div 
      v-for="item in navItems" 
      :key="item.path"
      class="nav-item"
      :class="{ 'active': currentPath === item.path }"
      @click="navigateTo(item.path)">
      <i :class="item.icon"></i>
      <span>{{ item.title }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPath: '/',
      navItems: [
        { path: '/', title: '首页', icon: 'icon-home' },
        { path: '/about', title: '关于', icon: 'icon-info' }
      ]
    }
  },
  methods: {
    navigateTo(path) {
      this.currentPath = path
      this.$router.push(path)
    }
  }
}
</script>

<style>
.sidebar {
  width: 200px;
  height: 100vh;
  background: #2c3e50;
  color: white;
}
.nav-item {
  padding: 12px 20px;
  cursor: pointer;
}
.nav-item:hover {
  background: #34495e;
}
.active {
  background: #34495e;
  border-left: 4px solid #42b983;
}
</style>

响应式导航

添加响应式功能，在小屏幕下隐藏导航或显示汉堡菜单：

<template>
  <div>
    <button @click="toggleSidebar" class="hamburger">
      ☰
    </button>
    <div class="sidebar" :class="{ 'collapsed': isCollapsed }">
      <!-- 导航内容 -->
    </div>
  </div>
</template>

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

<style>
.hamburger {
  display: none;
}
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .sidebar.collapsed {
    transform: translateX(0);
  }
}
</style>

嵌套路由导航

对于多级导航，可以使用嵌套路由和递归组件：

<template>
  <div>
    <div v-for="item in navItems" :key="item.path">
      <div @click="toggleExpand(item)">
        {{ item.title }}
        <span v-if="item.children">{{ isExpanded(item) ? '−' : '+' }}</span>
      </div>
      <div v-if="item.children && isExpanded(item)" class="submenu">
        <NavItem :items="item.children" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NavItem',
  props: ['items'],
  data() {
    return {
      expandedItems: []
    }
  },
  methods: {
    isExpanded(item) {
      return this.expandedItems.includes(item.path)
    },
    toggleExpand(item) {
      if (item.children) {
        const index = this.expandedItems.indexOf(item.path)
        if (index > -1) {
          this.expandedItems.splice(index, 1)
        } else {
          this.expandedItems.push(item.path)
        }
      } else {
        this.$router.push(item.path)
      }
    }
  }
}
</script>

vue实现左侧导航