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()
  }

這就結束了，不瞭解的可以結合文檔理解，我開始也是不知道怎麼辦網上找也沒有和我這一模一樣的，搞出來了就記錄一下，希望對其他人有所幫助，在此記錄。
每天進步一點點，加油！