欢迎一起交流,可以要一个赞吗,嘿嘿
具体效果图如下
1.第一次进入,默认选中组件超市,注意看网址栏后面的item.name变化
2.切换到我的发布
3.在我的发布页面进行刷新
导航栏组件如下
1.重点:
//动态判断当前点击的导航栏是否和要跳转的路由name相同,
//相同则切换到目标路由的同时,触发active属性,高亮导航栏
:class="activeMenu == '/' + item.name ? 'active' : ''"
//我这里的item.name其实就是要跳转路由后面的一串地址ComponentSupermarket
//我的是http://10.45.148.213:8080/#/ComponentSupermarket这样的
//default-active="activeMenu"// 默认高亮(当前激活菜单的 index)
:default-active="activeMenu"
2.全部代码如下:
<template>
<div class="header">
<div class="img">
<img src="@/assets/logo.png" alt="">
</div>
<!-- :default-active="activeMenu" // 默认高亮(当前激活菜单的 index)
router // 是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转,此时菜单的高亮是menu组件中的index属性和地址栏中的路径匹配到了就会高亮。 -->
<!-- :default-active="activeMenu" -->
<el-menu :default-active="activeMenu"
mode="horizontal"
@select="handleSelect"
router
background-color="#222732"
active-text-color="#FFFEFE"
text-color="#FFFFFF"
v-for="(item, index) in navList"
:key="index"
>
<!-- 当将el-menu的router属性设置为true时,跳转的路由如果没有设置route,则使用的是index的值,如果写了route,则路由使用的是route的值 -->
<el-menu-item :index="item.name"
:class="activeMenu == '/' + item.name ? 'active' : ''"
>
<template slot="title">
<span> {{ item.navItem }}</span>
</template>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
navList:[
{name:'OverviewOfComponentResources',navItem:'组件资源总览'},
{name:'ComponentSupermarket',navItem:'组件超市'},
{name:'ComponentAssetManagement',navItem:'组件资产管理'},
{name:'ComponenTypeManagement',navItem:'组件类型管理'},
{name:'UserAccessManagement',navItem:'用户账号管理'},
{name:'MyRelease',navItem:'我的发布'},
{name:'MyDownloads',navItem:'我的下载'},
],
};
},
computed: {
activeMenu () {
const route = this.$route
const { meta, path } = route
console.log(meta, path)
if (meta.activeMenu) {
return meta.activeMenu
}
return path
}
},
methods: {
handleSelect(key, keyPath) {
console.log(key,keyPath);
},
}
}
</script>
<style lang="scss">
.header {
display: flex;
width: 100%;
height: 69px;
background-color: #222732;
border-bottom:0px !important;
.img {
background:#222732;
img {
width: 292px;
height:36px;
padding:5px;
margin-top: 9px;
}
}
.el-menu{
height: 69px;
background-color: #222732 !important;
color: #ffffff !important;
}
.el-menu--horizontal {
border-bottom: solid 1px #222732 !important;
}
.el-menu-item {
font-size: 21px !important;
background-color: #222732 !important;
text-align: right;
float: right;
color: #ffffff !important;
height: 69px !important;
border-bottom:0px !important;
//高亮显示
&.active{
color: #ffffff !important;
background-color: #0082c8 !important;
height: 69px !important;
}
}
}
</style>
router下的index.js配置如下
1.重点:
在每一个要跳转的路由路径下面添加meta,其中里面的activeMenu就是当切换导航栏时要自动添加在浏览器后面的地址item.name
2.这里我只展示主要代码部分:
export default new Router({
routes:[
{
path: '/',
name: 'main',
redirect: ComponentSupermarket
},
{
path: '/',
name: 'home',
component: Home,
children: [
{
path: '/ComponentSupermarket',
name: 'ComponentSupermarket',
component: ComponentSupermarket,
meta: {
title: '组件超市',
activeMenu: '/ComponentSupermarket'
}
},
{
path: '/MyRelease',
name: 'MyRelease',
component: () => import('@/views/MyRelease.vue'),
meta: {
title: '我的发布',
activeMenu: '/MyRelease'
}
},
]
},
]
})