<template>
  <div>
    <header class="page-header">
      <div class="header-content">
        <img src="@/assets/wyy.png" alt="logo" class="header-logo">
        <h1 class="header-title">网抑云音乐</h1>
        <el-button @click="logout">退出登录</el-button>
      </div>
    </header>
    <div class="container">
      <nav class="page-nav">
        <el-menu :router="true" mode="horizontal" @select="handleSelect" class="nav-menu">
          <el-menu-item index="MyHome" route="/home" class="custom-menu-item">首页</el-menu-item>
          <el-menu-item index="my-music" route="/my-music" class="custom-menu-item">我的音乐</el-menu-item>
        </el-menu>
      </nav>
      <main class="page-content">
        <!-- 专门为各个页面准备的 -->
        <router-view></router-view>
      </main>
    </div>
    <footer class="page-footer">
      <div class="footer-content">
        &copy; 2024 网抑云音乐. All rights reserved.
      </div>
    </footer>
  </div>
</template>

<script>
import { Menu, MenuItem } from 'element-ui';

export default {
  components: {
    ElMenu: Menu,
    ElMenuItem: MenuItem
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style>
/* 你的样式 */
.page-header {
  background-color: red;
  height: 70px; 
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start; 
  color: white;
  font-size: 0px; 
  text-align: center; 
}

.header-content {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.header-logo {
  height: 15%; 
  width: 15%; 
  margin-right: 20px; 
}

.header-title {
  margin: 0; 
  font-size: 30px; 
}

.container {
  display: flex;
}

.page-nav {
  background-color: #ffffff;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; /* 上下间隔 */
}

.nav-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.custom-menu-item {
  background-color: transparent; /* 默认背景颜色透明 */
  border: none; /* 去掉默认边框 */
  padding: 10px 20px; /* 内边距 */
  transition: background-color 0.3s; /* 平滑过渡效果 */
  color: black; /* 文字颜色 */
  width: 100%; /* 宽度占满父容器 */
  text-align: center; /* 文字居中 */
  position: relative; /* 用于定位伪元素 */
}

.custom-menu-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent; /* 默认背景颜色透明 */
  z-index: -1; /* 使伪元素位于文字下方 */
  transition: background-color 0.3s; /* 平滑过渡效果 */
}

.custom-menu-item:hover::before {
  background-color: red; /* 鼠标悬停时的背景颜色 */
}

.page-content {
  height: 574px;
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
}

/* 导航菜单样式 */
.nav-menu .el-menu-item {
  color: black;
}

.nav-menu .el-menu-item:hover {
  background-color: red !important;
  color: white;
}

/* 页尾标签 */
.page-footer {
  background-color: red;
  height: 35px; /* 头部标签高度的一半 */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  text-align: center;
}

.footer-content {
  margin: 0;
  padding: 0;
}

/* 页尾标签的响应式设计 */
@media (max-width: 768px) {
  .page-footer {
    height: 40px; /* 与头部标签高度的一半保持一致 */
  }
}

@media (max-width: 480px) {
  .page-footer {
    height: 30px; /* 与头部标签高度的一半保持一致 */
  }
}
</style>
根据上面要求，帮我检查代码，为什么只有路径跳转没有跳转画面