iview頁面刷新菜單保持高亮

一、在路由當中設置name和openName屬性，然後在菜單中綁定相應屬性後可根據當前路由來實現當前菜單高亮

{
  path:'/home/patient_list',
  name:'patient_list',
  meta:{
    openName:['數據管理'],
  },
  component:PatientList
},
{
  path:'/home/data_input',
  name:'data_input',
  meta:{
    openName:['數據管理'],
  },
  component:DataEntry
},

二、菜單綁定name和openName屬性，這樣其實已經實現了菜單高亮的效果，但是刷新後菜單就會失去高亮也不會自動展開

<Menu :open-names="$route.meta.openName" :active-name="$route.name" ref="menu" accordion>
  <Submenu :name="item.authName" v-for="(item,index) in menuList" :key="item.id" :class="setClass(index)">
    <template slot="title">
      <i class="icon"></i>
      {{item.authName}}
    </template>
    <MenuItem :name="item1.authCode" v-for="(item1,index) in item.childs"
              :key="item1.id" :to="{path:`/home/${item1.authCode}`}">
      {{item1.authName}}
    </MenuItem>
  </Submenu>
</Menu>

三、頁面刷新後實現自動展開菜單組和高亮

methods:{
 menuActive() {//被激活的菜單組
   this.$nextTick(function () {
     this.$refs.menu.updateOpened();
     this.$refs.menu.updateActiveName();
   })
  },
},
mounted() {
  this.menuActive();//調用
}