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的菜单结构啦，简单表示一下

  //router  关键    是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
 
   

好，关键的来了，看注释

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

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