当前位置：首页 > news >正文

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

news 来源：原创 2025/6/7 23:09:44

顶部菜单实现

<!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%;"><templateslot="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>