当前位置：首页 > VUE

vue怎么实现左侧导航

2026-01-21 11:30:58VUE

Vue 实现左侧导航的方法

使用 Element UI 的导航菜单组件

Element UI 提供了 el-menu 组件，适合快速搭建左侧导航。安装 Element UI 后，可以直接使用以下代码实现：

<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 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>
</template>

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

自定义导航组件

如果需要完全自定义导航，可以手动实现一个基于 Vue 的导航组件。创建一个 Sidebar.vue 文件：

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

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

<style>
.sidebar {
  width: 200px;
  height: 100vh;
  background-color: #f5f5f5;
  padding: 20px;
}
.menu-item {
  margin-bottom: 10px;
}
.menu-item a {
  text-decoration: none;
  color: #333;
}
.menu-item a:hover {
  color: #42b983;
}
</style>

结合 Vue Router 实现路由跳转

左侧导航通常需要与路由结合，确保点击导航项时跳转到对应页面。在 router/index.js 中配置路由：

vue怎么实现左侧导航

import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    { path: '/home', component: Home },
    {path: '/about', component: About }
  ]
});

在导航组件中使用 router-link 实现路由跳转：

<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>

动态生成导航菜单

如果需要从后端获取导航数据，可以通过 API 动态生成菜单：

vue怎么实现左侧导航

export default {
  data() {
    return {
      menuItems: []
    };
  },
  async created() {
    const response = await fetch('/api/menu');
    this.menuItems = await response.json();
  }
};

响应式设计

为了让左侧导航在不同屏幕尺寸下表现良好，可以结合 CSS 媒体查询实现响应式布局：

@media (max-width: 768px) {
  .sidebar {
    width: 60px;
  }
  .menu-item span {
    display: none;
  }
}

添加折叠功能

通过 Vue 的 v-show 或 v-if 实现导航栏的折叠功能：

<template>
  <div>
    <button @click="toggleSidebar">折叠/展开</button>
    <div class="sidebar" v-show="isSidebarOpen">
      <!-- 导航内容 -->
    </div>
  </div>
</template>

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

标签: vue