Vue学生管理系统,请给我好看的前端Vue代码，有五个导航栏，每个导航栏有两个子导航栏

以下是一个简单的 Vue 学生管理系统前端代码，包括五个导航栏，每个导航栏有两个子导航栏。你可以根据需要进行修改和调整。

<template>
  <div class="container">
    <div class="sidebar">
      <div class="nav">
        <router-link to="/dashboard" class="nav-item" :class="{ active: currentTab === 'dashboard' }">
          <i class="fas fa-tachometer-alt"></i>
          <span class="nav-text">Dashboard</span>
        </router-link>
        <div class="nav-submenu">
          <router-link to="/dashboard/overview" class="nav-item" :class="{ active: currentTab === 'overview' }">
            <i class="fas fa-chart-line"></i>
            <span class="nav-text">Overview</span>
          </router-link>
          <router-link to="/dashboard/reports" class="nav-item" :class="{ active: currentTab === 'reports' }">
            <i class="fas fa-file-alt"></i>
            <span class="nav-text">Reports</span>
          </router-link>
        </div>
      </div>
      <div class="nav">
        <router-link to="/students" class="nav-item" :class="{ active: currentTab === 'students' }">
          <i class="fas fa-user-graduate"></i>
          <span class="nav-text">Students</span>
        </router-link>
        <div class="nav-submenu">
          <router-link to="/students/list" class="nav-item" :class="{ active: currentTab === 'list' }">
            <i class="fas fa-list"></i>
            <span class="nav-text">List</span>
          </router-link>
          <router-link to="/students/add" class="nav-item" :class="{ active: currentTab === 'add' }">
            <i class="fas fa-plus"></i>
            <span class="nav-text">Add</span>
          </router-link>
        </div>
      </div>
      <div class="nav">
        <router-link to="/teachers" class="nav-item" :class="{ active: currentTab === 'teachers' }">
          <i class="fas fa-chalkboard-teacher"></i>
          <span class="nav-text">Teachers</span>
        </router-link>
        <div class="nav-submenu">
          <router-link to="/teachers/list" class="nav-item" :class="{ active: currentTab === 'list' }">
            <i class="fas fa-list"></i>
            <span class="nav-text">List</span>
          </router-link>
          <router-link to="/teachers/add" class="nav-item" :class="{ active: currentTab === 'add' }">
            <i class="fas fa-plus"></i>
            <span class="nav-text">Add</span>
          </router-link>
        </div>
      </div>
      <div class="nav">
        <router-link to="/courses" class="nav-item" :class="{ active: currentTab === 'courses' }">
          <i class="fas fa-book"></i>
          <span class="nav-text">Courses</span>
        </router-link>
        <div class="nav-submenu">
          <router-link to="/courses/list" class="nav-item" :class="{ active: currentTab === 'list' }">
            <i class="fas fa-list"></i>
            <span class="nav-text">List</span>
          </router-link>
          <router-link to="/courses/add" class="nav-item" :class="{ active: currentTab === 'add' }">
            <i class="fas fa-plus"></i>
            <span class="nav-text">Add</span>
          </router-link>
        </div>
      </div>
      <div class="nav">
        <router-link to="/settings" class="nav-item" :class="{ active: currentTab === 'settings' }">
          <i class="fas fa-cog"></i>
          <span class="nav-text">Settings</span>
        </router-link>
        <div class="nav-submenu">
          <router-link to="/settings/profile" class="nav-item" :class="{ active: currentTab === 'profile' }">
            <i class="fas fa-user"></i>
            <span class="nav-text">Profile</span>
          </router-link>
          <router-link to="/settings/account" class="nav-item" :class="{ active: currentTab === 'account' }">
            <i class="fas fa-lock"></i>
            <span class="nav-text">Account</span>
          </router-link>
        </div>
      </div>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'dashboard'
    }
  },
  watch: {
    '$route.path'(newPath) {
      this.currentTab = newPath.split('/')[1] || 'dashboard'
    }
  }
}
</script>

<style>
/* 样式可以根据需要进行修改和调整 */
.container {
  display: flex;
  height: 100%;
}

.sidebar {
  width: 200px;
  background-color: #333;
  color: #fff;
}

.nav {
  padding: 10px;
}

.nav-item {
  display: flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 5px;
}

.nav-item:hover {
  background-color: #555;
}

.nav-item.active {
  background-color: #555;
}

.nav-item i {
  margin-right: 10px;
}

.nav-submenu {
  margin-left: 20px;
}

.nav-submenu .nav-item {
  margin-left: 20px;
  font-size: 14px;
}

.main {
  flex: 1;
  padding: 20px;
}
</style>