16.在sessionStorage中保存左侧菜单的激活状态

1.el-menu的default-active属性

打开element官网的，查看Menu的default-active属性

在项目中使用

效果如下：

2.在sessionStorage中保存左侧菜单的激活状态

2.1在sessionStorage中保存点击的菜单路径

在二级菜单中设置saveNavState方法，

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

在methods中定义该方法，将路径保存在sessionStorage中

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

2.2将sessionStorage的菜单路径赋值给menu的default-active属性

在data中设置activePath

绑定到menu的default-active属性

在created方法中将sessionStorage的菜单路径赋值给menu的default-active属性。这样，即使重新刷新页面，仍然能够保持原有的菜单高亮

点击时将该路径传递给对应的this.activePath，使每次点击时改变高亮菜单

这样，就完成了页面刷新是的菜单高亮状态不变和点击时菜单高亮状态的改变功能。