整个导航代码
<template>
<div class="index">
<el-header>
<el-menu
:default-active="this.$route.path"
class="el-menu-demo"
mode="horizontal"
router
@select="handleSelect"
>
<el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">
<template slot="title">
<span> {{ item.navItem }}</span>
</template>
</el-menu-item>
</el-menu>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</div>
</template>
<script>
export default {
data() {
return {
navList: [
{ name: "/", navItem: "首页" },
{ name: "/test1", navItem: "元宇宙" },
{ name: "/test2", navItem: "操作系统" },
{ name: "/test3", navItem: "产品中心" },
{ name: "/test4", navItem: "解决方案" },
{ name: "/test5", navItem: "新闻中心" },
{ name: "/test6", navItem: "关于我们" },
],
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
},
};
</script>
<style scoped>
.index {
width: 100%;
height: 100%;
}
.el-card__body, .el-main{
padding: 0px;
}
.el-menu.el-menu--horizontal{
border-bottom:none !important;
}
.el-menu-item.is-active{
border-bottom:2px solid #e69524;
color: #e69524;
}
</style>
在首页前面添加图片