vue 网站导航栏

vue 网站导航栏

<template><!-- 顶部导航栏 --><header class="navbar"><div class="logo-area"><img src="" alt="" class="logoImg" /><span class="system-name">xxxx管理系统</span></div><el-menu mode="horizontal" :default-active="activeMenu" class="nav-menu" :ellipsis="false" @select="handleMenuChange"><el-menu-item index="index">首页</el-menu-item><el-menu-item index="file" :class="{ active: activeIndex == 1 }">文件检索</el-menu-item><el-menu-item index="list" :class="{ active: activeIndex == 2 }">成果列表</el-menu-item><el-menu-item index="download" :class="{ active: activeIndex == 3 }">下载中心</el-menu-item><el-menu-item index="help" :class="{ active: activeIndex == 4 }">帮助中心</el-menu-item></el-menu></header>
</template><script setup>
import { ref, defineProps } from 'vue'
import { useRoute, useRouter } from 'vue-router'const props = defineProps({activeIndex: {type: Number,default: 1,},
})const route = useRoute()
const router = useRouter()const activeMenu = ref('download')const handleMenuChange = (path) => {router.push({ path: path, query: {} })
}
</script><style lang="scss" scoped>
/* 顶部导航栏 */
.navbar {display: flex;justify-content: space-between;align-items: center;padding: 0 110px;height: 60px;background-color: #fff;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}.logo-area {display: flex;align-items: center;
}.logo-icon {font-size: 24px;color: #409eff;margin-right: 8px;
}.system-name {font-size: 18px;font-weight: bold;color: #303133;
}.nav-menu {--el-menu-bg-color: transparent;--el-menu-active-text-color: $primary;--el-menu-text-color: #606266;
}.nav-menu .active {border-bottom: 2px solid $primary;
}.logoImg {width: 40px;height: 40px;border-radius: 8px;background: $primary;margin-right: 12px;
}
</style>