vue实现二级菜单的持久高亮

使用属性

default-active

当前激活菜单的 index

string

—

—

具体实现代码

1.动态改变default-active属性，想要将那个菜单设置高亮，将该菜单的index值赋值给default-active属性即可

<el-menu :default-active="activePath">

2.为该菜单设置点击事件

<el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="saveNavState('/'+subItem.path)">

// 保存链接的激活状态
saveNavState(activePath){
  window.sessionStorage.setItem('activePath',activePath)
  this.activePath = activePath
}

3.在datas中设置变量

// 是否保持高亮
activePath: ''

4.在页面初始化时获取变量值
created () {
  this.getMenuList()
  this.activePath = window.sessionStorage.getItem('activePath')
},