网站首页菜单两种布局vue+elementui顶部和左侧栏导航

顶部菜单实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.js + Element UI 路由导航</title>
  <!-- 引入Element UI样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
      background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
      min-height: 100vh;
      padding: 20px;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    header {
      background: linear-gradient(90deg, #1e5799 0%, #207cca 51%, #2989d8 100%);
      color: white;
      padding: 20px;
      text-align: center;
    }
    header h1 {
      font-size: 2.2rem;
      margin-bottom: 10px;
    }
    header p {
      font-size: 1.1rem;
      opacity: 0.9;
    }
    .content {
      padding: 30px;
    }
    .dashboard {
      display: grid;
      grid-template-columns: 1fr 3fr;
      gap: 30px;
      margin-top: 20px;
    }
    .card {
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      padding: 25px;
      margin-bottom: 25px;
    }
    .card h2 {
      color: #2c3e50;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
    }
    .features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }
    .feature-card {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 20px;
      transition: all 0.3s ease;
      border-left: 4px solid #409EFF;
    }
    .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    }
    .feature-card h3 {
      color: #1e5799;
      margin-bottom: 10px;
    }
    .page-content {
      min-height: 400px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: #f8fafc;
      border-radius: 8px;
      padding: 40px;
      text-align: center;
    }
    .page-content h2 {
      font-size: 2.5rem;
      color: #2c3e50;
      margin-bottom: 20px;
    }
    .page-content p {
      font-size: 1.2rem;
      color: #5a6a7f;
      max-width: 700px;
      line-height: 1.8;
    }
    .el-menu-demo {
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    }
    footer {
      text-align: center;
      padding: 25px;
      color: #7f8c8d;
      border-top: 1px solid #eee;
      margin-top: 30px;
    }
    .router-link-active {
      text-decoration: none;
    }
    a {
      text-decoration: none;
      color: inherit;
    }
    .el-menu-item [class^=el-icon-] {
      vertical-align: middle;
      margin-right: 5px;
      width: 24px;
      text-align: center;
      font-size: 18px;
    }
    .el-submenu [class^=el-icon-] {
      vertical-align: middle;
      margin-right: 5px;
      width: 24px;
      text-align: center;
      font-size: 18px;
    }
    .el-menu-item.is-active {
      background-color: #1e5799 !important;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
    
      
      <div class="content">
        <!-- 导航菜单 -->
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item index="/dashboard">
            <i class="el-icon-s-home"></i>
            <span>控制面板</span>
          </el-menu-item>
          <el-submenu index="workspace">
            <template slot="title">
              <i class="el-icon-s-platform"></i>
              <span>工作空间</span>
            </template>
            <el-menu-item index="/projects">项目管理</el-menu-item>
            <el-menu-item index="/tasks">任务管理</el-menu-item>
            <el-menu-item index="/calendar">日历视图</el-menu-item>
            <el-submenu index="reports">
              <template slot="title">报表统计</template>
              <el-menu-item index="/reports/weekly">周报</el-menu-item>
              <el-menu-item index="/reports/monthly">月报</el-menu-item>
              <el-menu-item index="/reports/custom">自定义报表</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="/messages">
            <i class="el-icon-message"></i>
            <span>消息中心</span>
          </el-menu-item>
          <el-menu-item index="/settings">
            <i class="el-icon-setting"></i>
            <span>系统设置</span>
          </el-menu-item>
          <el-menu-item index="https://element.eleme.io" target="_blank">
            <i class="el-icon-link"></i>
            <span>Element UI 文档</span>
          </el-menu-item>
        </el-menu>
        
        <!-- 路由出口 -->
        <router-view></router-view>
       
      </div>
      
      <footer>
        <p>© 2023 Vue.js + Element UI 导航系统 | 修复路由配置示例</p>
      </footer>
    </div>
  </div>

  <!-- 引入Vue.js -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- 引入Vue Router -->
  <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
  <!-- 引入Element UI -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  
  <script>
    // 定义路由组件
    const Dashboard = { 
      template: `
        <div class="page-content">
          <h2>控制面板</h2>
          <p>欢迎使用系统控制面板。在这里您可以查看系统概览、管理项目、跟踪任务和访问各种工具。</p>
          <p>使用左侧菜单导航到不同功能模块，或使用顶部菜单访问主要功能区域。</p>
          <el-button type="primary" size="medium" style="margin-top: 20px;">开始使用</el-button>
        </div>
      `
    };
    
    const Projects = { 
      template: `
        <div class="page-content">
          <h2>项目管理</h2>
          <p>在这里您可以创建新项目、管理现有项目、分配任务给团队成员并跟踪项目进度。</p>
          <p>使用卡片视图、列表视图或甘特图查看项目状态。</p>
        </div>
      `
    };
    
    const Tasks = { 
      template: `
        <div class="page-content">
          <h2>任务管理</h2>
          <p>查看和分配任务，设置优先级和截止日期，跟踪任务完成情况。</p>
          <p>使用看板视图直观地管理任务状态：待处理、进行中、已完成。</p>
        </div>
      `
    };
	
	 const Calendar = { 
      template: `
        <div class="page-content">
          <h2>日历管理</h2>
          <p>查看日历，设置优先级和截止日期。</p>
        </div>
      `
    };
    
    const Messages = { 
      template: `
        <div class="page-content">
          <h2>消息中心</h2>
          <p>查看系统通知、团队消息和项目更新。与团队成员保持沟通。</p>
          <p>您可以在这里发送和接收消息，设置消息提醒和通知偏好。</p>
        </div>
      `
    };
    
    const Settings = { 
      template: `
        <div class="page-content">
          <h2>系统设置</h2>
          <p>配置系统参数、用户权限、界面主题和其他个性化选项。</p>
          <p>管理团队成员、设置角色权限和配置系统集成。</p>
        </div>
      `
    };
    
    const Reports = { 
      template: `
        <div class="page-content">
          <h2>报表统计</h2>
          <p>生成和查看各种报表，包括项目进度、团队绩效和资源使用情况。</p>
          <p>自定义报表模板，设置自动生成和发送报表的时间表。</p>
        </div>
      `
    };
    
    // 定义路由
    const routes = [
      { path: '/', redirect: '/dashboard' },
      { path: '/dashboard', component: Dashboard },
      { path: '/projects', component: Projects },
      { path: '/calendar', component: Calendar },
	  { path: '/tasks', component: Tasks },
      { path: '/messages', component: Messages },
      { path: '/settings', component: Settings },
      { path: '/reports', component: Reports },
      { path: '/reports/weekly', component: Reports },
      { path: '/reports/monthly', component: Reports },
      { path: '/reports/custom', component: Reports }
    ];
    
    // 创建路由实例
    const router = new VueRouter({
      routes
    });
    
    // 创建Vue实例
    new Vue({
      el: '#app',
      router,
      data() {
        return {
          activeIndex: '/dashboard'
        }
      },
      mounted() {
        // 设置当前激活菜单项
        this.activeIndex = this.$route.path;
      },
      watch: {
        // 当路由变化时更新激活菜单项
        '$route'(to) {
          this.activeIndex = to.path;
        }
      },
      methods: {
        handleSelect(key) {
          // 处理菜单选择
          if (key.startsWith('http')) {
            // 外部链接，在新标签页打开
            window.open(key, '_blank');
          } else {
            // 内部路由导航
            this.$router.push(key);
          }
        }
      }
    });
  </script>
</body>
</html>

2 左侧边栏菜单布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.js + Element UI 侧边栏导航</title>
  <!-- 引入Element UI样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
      background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
      min-height: 100vh;
      padding: 20px;
    }
    .container {
      max-width: 1400px;
      margin: 0 auto;
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 90vh;
    }
    header {
      background: linear-gradient(90deg, #1e5799 0%, #207cca 51%, #2989d8 100%);
      color: white;
      padding: 20px;
      text-align: center;
    }
    header h1 {
      font-size: 2.2rem;
      margin-bottom: 10px;
    }
    header p {
      font-size: 1.1rem;
      opacity: 0.9;
    }
    
    .main-content {
      display: flex;
      flex: 1;
    }
    
    /* 侧边栏样式 */
    .sidebar {
      width: 250px;
      background: #fff;
      border-right: 1px solid #e6e6e6;
      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      overflow: hidden;
    }
    
    .sidebar .el-menu {
      border-right: none;
      height: 100%;
    }
    
    .sidebar .el-submenu .el-menu-item {
      min-width: auto;
      padding-left: 50px !important;
    }
    
    .sidebar .el-menu-item,
    .sidebar .el-submenu__title {
      height: 50px;
      line-height: 50px;
    }
    
    .sidebar .el-menu-item [class^=el-icon-] {
      margin-right: 10px;
      font-size: 18px;
    }
    
    .sidebar .el-submenu [class^=el-icon-] {
      margin-right: 10px;
      font-size: 18px;
    }
    
    .sidebar .el-menu-item.is-active {
      background-color: #ecf5ff !important;
      color: #1e5799 !important;
      font-weight: bold;
      border-left: 4px solid #1e5799;
    }
    
    .sidebar .el-menu-item:hover,
    .sidebar .el-submenu__title:hover {
      background-color: #f5f7fa !important;
    }
    
    .sidebar .el-submenu__title i {
      color: #1e5799;
    }
    
    /* 内容区域样式 */
    .content {
      flex: 1;
      padding: 30px;
      background: #f8fafc;
      overflow-y: auto;
    }
    
    .dashboard {
      display: grid;
      grid-template-columns: 1fr 3fr;
      gap: 30px;
      margin-top: 20px;
    }
    
    .card {
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      padding: 25px;
      margin-bottom: 25px;
    }
    
    .card h2 {
      color: #2c3e50;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
    }
    
    .features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }
    
    .feature-card {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 20px;
      transition: all 0.3s ease;
      border-left: 4px solid #409EFF;
    }
    
    .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    }
    
    .feature-card h3 {
      color: #1e5799;
      margin-bottom: 10px;
    }
    
    .page-content {
      min-height: 400px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: white;
      border-radius: 8px;
      padding: 40px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
    
    .page-content h2 {
      font-size: 2.5rem;
      color: #2c3e50;
      margin-bottom: 20px;
    }
    
    .page-content p {
      font-size: 1.2rem;
      color: #5a6a7f;
      max-width: 700px;
      line-height: 1.8;
    }
    
    footer {
      text-align: center;
      padding: 25px;
      color: #7f8c8d;
      border-top: 1px solid #eee;
      margin-top: auto;
    }
    
    .router-link-active {
      text-decoration: none;
    }
    
    a {
      text-decoration: none;
      color: inherit;
    }
    
    .logo {
      padding: 20px;
      text-align: center;
      border-bottom: 1px solid #eee;
    }
    
    .logo h2 {
      color: #1e5799;
      font-size: 1.5rem;
    }
    
    .logo p {
      color: #7f8c8d;
      font-size: 0.9rem;
    }
    
    .user-info {
      padding: 20px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #eee;
    }
    
    .user-info .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #1e5799;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      margin-right: 15px;
    }
    
    .user-info .details {
      flex: 1;
    }
    
    .user-info .name {
      font-weight: bold;
      color: #2c3e50;
    }
    
    .user-info .role {
      color: #7f8c8d;
      font-size: 0.9rem;
    }
    
    .mobile-toggle {
      display: none;
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 1000;
      background: #1e5799;
      color: white;
      border: none;
      border-radius: 4px;
      padding: 8px 12px;
      cursor: pointer;
    }
    
    @media (max-width: 992px) {
      .sidebar {
        position: fixed;
        left: -250px;
        top: 0;
        bottom: 0;
        z-index: 100;
        transition: all 0.3s ease;
      }
      
      .sidebar.active {
        left: 0;
        box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2);
      }
      
      .mobile-toggle {
        display: block;
      }
      
      .content {
        padding: 20px;
      }
      
      .page-content {
        padding: 20px;
      }
      
      .page-content h2 {
        font-size: 1.8rem;
      }
    }
    
    .stat-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }
    
    .stat-card {
      background: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      text-align: center;
      border-top: 4px solid #1e5799;
    }
    
    .stat-card .value {
      font-size: 2rem;
      font-weight: bold;
      color: #1e5799;
      margin: 10px 0;
    }
    
    .stat-card .label {
      color: #7f8c8d;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <header>
        <h1>Vue.js + Element UI 导航系统</h1>
        <p>侧边栏导航布局 - 专业管理系统</p>
      </header>
      
      <button class="mobile-toggle" @click="toggleSidebar">
        <i class="el-icon-menu"></i>
      </button>
      
      <div class="main-content">
        <!-- 侧边栏导航 -->
        <div class="sidebar" :class="{ active: sidebarActive }">
          <div class="logo">
            <h2>管理系统</h2>
            <p>Vue.js + Element UI</p>
          </div>
          
          <div class="user-info">
            <div class="avatar">
              <i class="el-icon-user"></i>
            </div>
            <div class="details">
              <div class="name">管理员</div>
              <div class="role">系统管理员</div>
            </div>
          </div>
          
          <el-menu
            :default-active="activeIndex"
            class="el-menu-vertical-demo"
            @select="handleSelect"
            background-color="#fff"
            text-color="#2c3e50"
            active-text-color="#1e5799">
            <el-menu-item index="/dashboard">
              <i class="el-icon-s-home"></i>
              <span>控制面板</span>
            </el-menu-item>
            <el-submenu index="workspace">
              <template slot="title">
                <i class="el-icon-s-platform"></i>
                <span>工作空间</span>
              </template>
              <el-menu-item index="/projects">项目管理</el-menu-item>
              <el-menu-item index="/tasks">任务管理</el-menu-item>
              <el-menu-item index="/calendar">日历视图</el-menu-item>
              <el-submenu index="reports">
                <template slot="title">报表统计</template>
                <el-menu-item index="/reports/weekly">周报</el-menu-item>
                <el-menu-item index="/reports/monthly">月报</el-menu-item>
                <el-menu-item index="/reports/custom">自定义报表</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-menu-item index="/messages">
              <i class="el-icon-message"></i>
              <span>消息中心</span>
            </el-menu-item>
            <el-menu-item index="/settings">
              <i class="el-icon-setting"></i>
              <span>系统设置</span>
            </el-menu-item>
            <el-menu-item index="https://element.eleme.io" target="_blank">
              <i class="el-icon-link"></i>
              <span>Element UI 文档</span>
            </el-menu-item>
          </el-menu>
        </div>
        
        <!-- 内容区域 -->
        <div class="content">
          <!-- 路由出口 -->
          <router-view></router-view>
        </div>
      </div>
      
      <footer>
        <p>© 2023 Vue.js + Element UI 导航系统 | 侧边栏布局示例</p>
      </footer>
    </div>
  </div>

  <!-- 引入Vue.js -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- 引入Vue Router -->
  <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
  <!-- 引入Element UI -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  
  <script>
    // 定义路由组件
    const Dashboard = { 
      template: `
        <div>
          <div class="stat-cards">
            <div class="stat-card">
              <i class="el-icon-s-order" style="font-size: 2rem; color: #1e5799;"></i>
              <div class="value">24</div>
              <div class="label">进行中的项目</div>
            </div>
            <div class="stat-card">
              <i class="el-icon-s-claim" style="font-size: 2rem; color: #1e5799;"></i>
              <div class="value">128</div>
              <div class="label">待处理任务</div>
            </div>
            <div class="stat-card">
              <i class="el-icon-s-comment" style="font-size: 2rem; color: #1e5799;"></i>
              <div class="value">12</div>
              <div class="label">未读消息</div>
            </div>
            <div class="stat-card">
              <i class="el-icon-user-solid" style="font-size: 2rem; color: #1e5799;"></i>
              <div class="value">8</div>
              <div class="label">在线成员</div>
            </div>
          </div>
          
          <div class="page-content">
            <h2>控制面板</h2>
            <p>欢迎使用系统控制面板。在这里您可以查看系统概览、管理项目、跟踪任务和访问各种工具。</p>
            <p>使用左侧菜单导航到不同功能模块，或使用顶部菜单访问主要功能区域。</p>
            <el-button type="primary" size="medium" style="margin-top: 20px;">开始使用</el-button>
          </div>
        </div>
      `
    };
    
    const Projects = { 
      template: `
        <div class="page-content">
          <h2>项目管理</h2>
          <p>在这里您可以创建新项目、管理现有项目、分配任务给团队成员并跟踪项目进度。</p>
          <p>使用卡片视图、列表视图或甘特图查看项目状态。</p>
          <el-button type="primary" style="margin-top: 20px;">创建新项目</el-button>
        </div>
      `
    };
    
    const Tasks = { 
      template: `
        <div class="page-content">
          <h2>任务管理</h2>
          <p>查看和分配任务，设置优先级和截止日期，跟踪任务完成情况。</p>
          <p>使用看板视图直观地管理任务状态：待处理、进行中、已完成。</p>
          <el-button type="primary" style="margin-top: 20px;">创建新任务</el-button>
        </div>
      `
    };
    
    const Calendar = { 
      template: `
        <div class="page-content">
          <h2>日历管理</h2>
          <p>查看日历，设置优先级和截止日期。</p>
          <el-calendar style="margin-top: 20px; width: 100%;">
            <template
              slot="dateCell"
              slot-scope="{date, data}">
              <p :class="data.isSelected ? 'is-selected' : ''">
                {{ data.day.split('-').slice(2).join('-') }}
              </p>
            </template>
          </el-calendar>
        </div>
      `
    };
    
    const Messages = { 
      template: `
        <div class="page-content">
          <h2>消息中心</h2>
          <p>查看系统通知、团队消息和项目更新。与团队成员保持沟通。</p>
          <p>您可以在这里发送和接收消息，设置消息提醒和通知偏好。</p>
          <el-button type="primary" style="margin-top: 20px;">查看消息</el-button>
        </div>
      `
    };
    
    const Settings = { 
      template: `
        <div class="page-content">
          <h2>系统设置</h2>
          <p>配置系统参数、用户权限、界面主题和其他个性化选项。</p>
          <p>管理团队成员、设置角色权限和配置系统集成。</p>
          <el-button type="primary" style="margin-top: 20px;">系统配置</el-button>
        </div>
      `
    };
    
    const Reports = { 
      template: `
        <div class="page-content">
          <h2>报表统计</h2>
          <p>生成和查看各种报表，包括项目进度、团队绩效和资源使用情况。</p>
          <p>自定义报表模板，设置自动生成和发送报表的时间表。</p>
          <el-button type="primary" style="margin-top: 20px;">生成报表</el-button>
        </div>
      `
    };
    
    // 定义路由
    const routes = [
      { path: '/', redirect: '/dashboard' },
      { path: '/dashboard', component: Dashboard },
      { path: '/projects', component: Projects },
      { path: '/calendar', component: Calendar },
      { path: '/tasks', component: Tasks },
      { path: '/messages', component: Messages },
      { path: '/settings', component: Settings },
      { path: '/reports', component: Reports },
      { path: '/reports/weekly', component: Reports },
      { path: '/reports/monthly', component: Reports },
      { path: '/reports/custom', component: Reports }
    ];
    
    // 创建路由实例
    const router = new VueRouter({
      routes
    });
    
    // 创建Vue实例
    new Vue({
      el: '#app',
      router,
      data() {
        return {
          activeIndex: '/dashboard',
          sidebarActive: false
        }
      },
      mounted() {
        // 设置当前激活菜单项
        this.activeIndex = this.$route.path;
        
        // 监听窗口大小变化
        window.addEventListener('resize', this.handleResize);
        this.handleResize();
      },
      beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
      },
      watch: {
        // 当路由变化时更新激活菜单项
        '$route'(to) {
          this.activeIndex = to.path;
          // 在移动设备上导航时关闭侧边栏
          if (window.innerWidth < 992) {
            this.sidebarActive = false;
          }
        }
      },
      methods: {
        handleSelect(key) {
          // 处理菜单选择
          if (key.startsWith('http')) {
            // 外部链接，在新标签页打开
            window.open(key, '_blank');
          } else {
            // 内部路由导航
            this.$router.push(key);
          }
        },
        toggleSidebar() {
          this.sidebarActive = !this.sidebarActive;
        },
        handleResize() {
          // 在大屏幕上自动显示侧边栏
          if (window.innerWidth >= 992) {
            this.sidebarActive = true;
          } else {
            this.sidebarActive = false;
          }
        }
      }
    });
  </script>
</body>
</html>