elementUI的Menu组件高亮问题并保存所选高亮

原因： 当<el-menu>组件添加router属性后 default-active 属性无法正常使用

1.将 default-active 改为动态属性并绑定一个动态的值

    <el-menu
          <!--  给他一个动态的值-->
          :default-active="active_path"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#303133"
          text-color="#fff"
          active-text-color="#409EFF"
          :unique-opened="true"
     router>
    <el-menu/>

2. 在所需的 el-menu-item 上添加点击事件，使点击后能够获得到当前菜单的路径

 <el-menu-item 
    :index="subItem.path" 
    v-for="subItem in item.children" 
    :key="subItem.id" 
    <!-- 这里添加一个点击事件获得当前菜单的路径 -->            
    @click="getActivePath">
    <i :class="iconObj[subItem.id]"></i>
    <span>{{ subItem.name }}</span>
 </el-menu-item>

3. 在data中保存这个动态属性，同时完成点击方法

  data() {
    return {
      active_path: ''
    };
  },

   methods: {
    // 获取动态的路径，赋值给高亮参数
    getActivePath(path) {
      this.active_path = path.index
    },
    
  }

4. 前面有了高亮之后但是页面前进或者后退都无法保存之前的选中状态所以可以把动态数据存入到vuex中然后在 created 函数中赋值给 data 保证已进入页面就有

        1. 在vuex中存储

export default {
  namespaced: true,
  state: {
    token: '',
    // 动态属性
    activePath: ''
  },
  mutations: {
    setToken(state, token) {
      state.token = token
    },
    // 提交动态属性
    setActivePath(state, activePath) {
      state.activePath = activePath
    }
  },
  actions: {},
  getters: {},
}

         2. 提交给vuex

methods: {
   
    // 获取动态的路径，赋值给高亮参数
    getActivePath(path) {
      this.active_path = path.index
      // 提交vuex
      this.$store.commit('user/setActivePath', this.active_path)
    },
   
  }

        3. 在created中赋值

  created() {
    // 赋值
    this.active_path = this.$store.state.user.activePath
  },