当前位置：首页 > VUE

vue实现左侧导航

2026-01-17 06:51:02VUE

Vue 实现左侧导航的方法

使用 Element UI 的导航组件

Element 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-submenu index="2">
      <template #title>
        <i class="el-icon-location"></i>
        <span>导航一</span>
      </template>
      <el-menu-item index="2-1">选项1</el-menu-item>
      <el-menu-item index="2-2">选项2</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

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

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

自定义 Vue 导航组件

如果需要更灵活的导航栏，可以手动实现一个基于 Vue 的导航组件。通过 v-for 动态渲染导航项，结合路由实现跳转。

<template>
  <div class="nav-container">
    <div 
      v-for="item in navItems" 
      :key="item.path"
      class="nav-item"
      :class="{ 'active': currentRoute === item.path }"
      @click="navigateTo(item.path)">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { name: '首页', path: '/' },
        { name: '关于', path: '/about' },
        { name: '联系', path: '/contact' }
      ],
      currentRoute: '/'
    };
  },
  methods: {
    navigateTo(path) {
      this.currentRoute = path;
      this.$router.push(path);
    }
  }
};
</script>

<style>
.nav-container {
  width: 200px;
  background-color: #2c3e50;
  color: white;
  height: 100vh;
}
.nav-item {
  padding: 12px 20px;
  cursor: pointer;
}
.nav-item:hover {
  background-color: #34495e;
}
.active {
  background-color: #16a085;
}
</style>

结合 Vue Router 实现导航

Vue Router 可以与导航组件结合，实现路由跳转和高亮当前路由。通过 router-link 或编程式导航完成跳转。

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

<script>
export default {
  data() {
    return {
      routes: [
        { name: '仪表盘', path: '/dashboard' },
        { name: '用户管理', path: '/users' },
        { name: '设置', path: '/settings' }
      ]
    };
  }
};
</script>

<style>
.sidebar {
  width: 220px;
  background: #f5f5f5;
  padding: 20px;
}
.nav-link {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}
.active {
  color: #42b983;
  font-weight: bold;
}
</style>

响应式左侧导航

为了实现响应式效果，可以通过 CSS 媒体查询或 Vue 的状态管理控制导航栏的显示与隐藏。

<template>
  <div class="nav-wrapper" :class="{ 'collapsed': isCollapsed }">
    <button @click="toggleCollapse">切换</button>
    <div class="nav-content">
      <!-- 导航内容 -->
    </div>
  </div>
</template>

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

<style>
.nav-wrapper {
  width: 250px;
  transition: width 0.3s;
}
.collapsed {
  width: 60px;
}
@media (max-width: 768px) {
  .nav-wrapper {
    width: 100%;
  }
}
</style>

vue实现左侧导航