vue+element动态设置el-menu导航,刷新页面保持当前菜单选中项及路由

今天闲来无事整理了一套后台管理系统的侧边栏菜单，实现了页面刷新路由保持不变和菜单也是当前点击的高亮状态
来一起看看吧！
首先，菜单数据是动态的，注意的是 id 和 路由的 name保持一致，页面刷新要用到：
一级菜单不用name，因为没用到路由跳转

const menus = [
    { id: '0', label: '首页', path: '/', icon: 'fa fa-dashboard' },
    {
        id: '1',
        icon: 'fa fa-circle-o',
        label: '菜单1',
        submenu: [
            { id: 'addDoctor', name: 'addDoctor', label: '菜单1-1', icon: 'fa fa-hand-o-up' }
        ]
    },
    {
        id: '2',
        icon: 'fa fa-circle-o',
        label: '菜单2',
        submenu: [
            { id: 'doctorList', name: 'doctorList', label: '菜单2-2', icon: 'fa fa-hand-o-up' }
        ]
    },
    {
        id: '3',
        icon: 'fa fa-circle-o',
        label: '菜单3',
        submenu: [
            { id: 'updateApp', name: 'updateApp', label: '菜单3-3', icon: 'fa fa-hand-o-up' }
        ]
    }
]
export default menus

下面就是element的菜单结构啦，简单表示一下

<v-menu class="side-menu"
  :collapse="collapse"
  :default-active="defaultActive"
  :menus="menus"
  router    
  :background-color="theme.backgroundColor"
  :text-color="theme.textColor"
  :active-text-color="theme.activeTextColor"
  >
  //router  关键    是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
 <template v-for="item in menus">
    <template>
    <el-menu-item-group
      :title="typeof item[0] === 'string' ? item[0] : ''"
      >
      <el-menu-item
        v-for="val in item[1]"
        :key="val.id"
        :default-active="defaultActive"
        :index="val.id"  //这里的id就是上面数据的id
        :route="toRoute(val)"
        >
        <i v-if="val.icon" :class="val.icon"></i>
        <span slot="title">{{val.label}}</span>
      </el-menu-item>
    </el-menu-item-group>
    </template>
   </template>
   </v-menu>

好，关键的来了，看注释

 data () {
    return {
      menus,
      defaultActive: '0', //关键   当前激活菜单的 index
    }
  },
  watch: {
    $route () {
      this.setCurrentRoute()
    }
  },
  methods: {
    setCurrentRoute () {
      this.defaultActive = this.$route.name；//关键   通过他就可以监听到当前路由状态并激活当前菜单
    }
  },
  created () {
    this.setCurrentRoute()
  }

这就结束了，不了解的可以结合文档理解，我开始也是不知道怎么办网上找也没有和我这一模一样的，搞出来了就记录一下，希望对其他人有所帮助，在此记录。
每天进步一点点，加油！