**问题:**本人最近在用Element-ui做一个商品后台管理系统,在使用NavMenu时需要使导航菜单高亮的需求。
代码:
<template>
<el-container>
<el-header>
<el-button type="info" @click="Exit">退出</el-button>
</el-header>
<el-container>
<el-aside :width="iscollaspace?'64px':'200px'">
<div class="toggle-button" @click="toggleCllaspace">|||</div>
<el-menu
class="el-menu-vertical-demo"
background-color="#333744"
text-color="#fff"
active-text-color="#F78989"
:collapse="iscollaspace"
:collapse-transition="iscollaspace"
router
:default-active="savepath"
unique-opened
>
<el-submenu :index="item.id+'' " v-for="item in Menulist" :key="item.id">
<template slot="title">
<i :class="iconlist[item.id]"></i>
<!--一级导航-->
<span>{{item.authName}}</span>
</template>
<el-menu-item
:index="'/'+scitem.path"
v-for=" scitem in item.children"
:key="scitem.id"
@click="activepath(scitem.path)"
>
<template slot="title">
<!--:使用冒号表示后面是一个变量或者是一个表达式-->
<i class="el-icon-location"></i>
<span>{{scitem.authName}}</span>
<!--二级导航-->
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
data() {
return {
Menulist: [],//左侧菜单列表数据
iconlist: {//存储左侧菜单图标信息,将左侧的图标存储在一个对象当中,以每个菜单的唯一id作为键名进行存储!
'125': 'iconfont icon-users',
'103': 'iconfont icon-tijikongjian',
'101': 'iconfont icon-shangpin',
'102': 'iconfont icon-danju',
'145': 'iconfont icon-baobiao',
},
iscollaspace: false,
savepath: ''//存储scitem.path值
}
},
created() {// 组件的周期函数也称为钩子函数,在组件创建的时候调用
this.Menugetlist()
this.savepath = window.sessionStorage.getItem("key")
console.log(this.Menulist)
},
methods: {
async Menugetlist() {
const { data: res } = await this.$http.get('menus')// 使用axios请求menu接口,并使用结构赋值。将data这个对象复制给res
if (res.meta.status !== 200) return this.$message.error(res.meta.msg)// 获取请求中的状态,如果不等于200,则输出错误
this.Menulist = res.data// 将请求的数据存储到Menulist数组中。
console.log(res)
},
Exit() {
window.sessionStorage.clear()
this.$router.push("/login")
},
toggleCllaspace() {
this.iscollaspace = !this.iscollaspace;
},
activepath(parameter) {
let light = "/" + parameter
window.sessionStorage.setItem("key", light)
this.savepath = light;
console.log(this.savepath)
}
}
}
</script>
<style lang="less" scoped>
.el-container {
height: 100%;
}
.el-header {
background-color: #373d41;
}
.el-aside {
background-color: #333744;
}
.el-main {
background-color: #eaedf1;
}
.el-menu {
background-color: #333744;
border: none;
}
.el-header {
position: relative;
}
.el-button {
position: absolute;
right: 30px;
top: 17.5%;
}
.el-submenu__title .iconfont {
margin-right: 5px;
}
.toggle-button {
background-color: #4a5064;
font-size: 10px;
text-align: center;
letter-spacing: 0.2em;
line-height: 24px;
color: #fff;
cursor: pointer;
}
</style>
**思路:**为每一个导航菜单添加一个点击事件,点击每一个导航菜单时,将路径以参数的形式传入函数中并存储到本地浏览器的仓库中(主要刷新时,记录上次点击导航栏是哪个,并且高亮)。因为NavMenu菜单是根据default-active和active-text-color(设置高亮的颜色)属性来实现高亮。default-active传入的当前的激活菜单index。然而每个菜单项的index是"+scitem.path",所以需要点击时将"scitem.path"保存在另一个变量中。