打造美观实用的 Vue + Element 后台管理侧边导航栏

2023-10-20 21:34:19

概述

侧边导航栏是后台管理系统中不可或缺的重要元素，它不仅可以帮助用户快速访问所需功能，还能让界面看起来更加整洁有序。在本文中，我们将使用 Vue.js 和 Element UI 库来构建一个美观实用的侧边导航栏，并详细介绍其实现过程。

使用 Vue.js 和 Element UI 创建侧边导航栏

1. 项目初始化

首先，我们需要创建一个新的 Vue.js 项目。您可以使用 Vue CLI 工具快速创建项目：

vue create vue-element-admin

2. 安装 Element UI

接下来，我们需要安装 Element UI 库：

npm install element-ui -S

3. 创建侧边导航栏组件

在项目中创建一个名为 Sidebar.vue 的组件，并添加以下代码：

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical-demo"
    @select="handleSelect"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <el-menu-item index="1">首页</el-menu-item>
    <el-menu-item index="2">用户管理</el-menu-item>
    <el-menu-item index="3">角色管理</el-menu-item>
    <el-menu-item index="4">权限管理</el-menu-item>
    <el-menu-item index="5">系统设置</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
    };
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
    },
  },
};
</script>

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

在这个组件中，我们使用 Element UI 的 el-menu 组件创建了一个侧边导航栏，并添加了五个菜单项。

4. 在 App.vue 中使用侧边导航栏组件

在 App.vue 文件中，将 Sidebar.vue 组件添加到模板中：

<template>
  <div id="app">
    <Sidebar />
    <div id="main">
      <router-view />
    </div>
  </div>
</template>

5. 添加路由

在 router/index.js 文件中，添加以下路由配置：

export default new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/users',
      name: 'Users',
      component: Users,
    },
    {
      path: '/roles',
      name: 'Roles',
      component: Roles,
    },
    {
      path: '/permissions',
      name: 'Permissions',
      component: Permissions,
    },
    {
      path: '/settings',
      name: 'Settings',
      component: Settings,
    },
  ],
});