如何实现Elemnt-UI中NavMenu菜单的高亮

**问题：**本人最近在用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"保存在另一个变量中。