[JavaScript知识库]Vue：如何保持导航栏的高亮状态

我们在利用Vue写后台管理系统时，对于导航栏我们需要保持其处于选择的高亮状态，大概要经过如下三个步骤：

1. 为所需要的点击的二级菜单栏设置点击事件，把对应的index值保存在sessionStorage中
2. 当页面刚被刷新创建时，将sessionStorage中的值取出来赋值给菜单栏进行激活
3. 点击每一个二级菜单栏时，要给activePath重新赋值

下面来看一下具体的实现过程：
1.为二级菜单栏绑定点击事件saveNavState

2.把对应的index值保存在sessionStorage中

saveNavState (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }

打开调试器可以看到点击菜单栏，保存了当前的index值

3.需要在页面刚被刷新创建时，将sessionStorage中的值取出来赋值给菜单栏进行激活，所以我们直接在create函数中进行操作

created () {
    this.getMenuList()
    // 将sessionStorage中的值取出来赋值给菜单栏
    this.activePath = window.sessionStorage.getItem('activePath')
  },

4.为菜单栏组件 < el-menu > 动态绑定 :default-active=“activePath” 属性
5.在saveNavState函数中添加this.activePath = activePath，保证点击每一个二级菜单栏时，activePath都重新赋值